君不见长松卧壑困风霜,时来屹立扶明堂。这篇文章主要讲述#yyds干货盘点#前端如何下载文件流相关的知识,希望能为你提供帮助。
前言如果后台返回的是文件地址,那么前端直接通过 window.location.href
加文件地址,就可以下载文件;
但是如果后台返回的是文件流,那么前端就需要做一些处理;
其实前端处理的核心:就是将文件流转为文件,然后再模拟点击,实现前者的效果。
步骤
1. 封装一个下载工具这个工具的作用就是,将获取的文件流转为文件,并模拟点击该文件,实现下载
先贴代码,download.js(可直接复制使用)
export const download = (res, type, filename) =>
{
// 创建blob对象,解析流数据
const blob = new Blob([res], {
// 设置返回的文件类型
// type: application/pdf;
charset=UTF-8 表示下载文档为pdf,如果是word则设置为msword,excel为excel
type: type
})
// 这里就是创建一个a标签,等下用来模拟点击事件
const a = document.createElement(a)
// 兼容webkix浏览器,处理webkit浏览器中href自动添加blob前缀,默认在浏览器打开而不是下载
const URL = window.URL || window.webkitURL
// 根据解析后的blob对象创建URL 对象
const herf = URL.createObjectURL(blob)
// 下载链接
a.href = https://www.songbingjia.com/android/herf
// 下载文件名,如果后端没有返回,可以自己写a.download = 文件.pdf
a.download = filename
document.body.appendChild(a)
// 点击a标签,进行下载
a.click()
// 收尾工作,在内存中移除URL 对象
document.body.removeChild(a)
window.URL.revokeObjectURL(herf)
}
上面代码的重点是Blob对象,详情可参考:MDN文档:Blob对象
2. 获取文件流【#yyds干货盘点#前端如何下载文件流】这里就是调用后台接口,获取文件流
后台方法:
@GetMapping(value = "https://www.songbingjia.com/download-file")
public byte[] downloadFile(String contractNo){
log.info("=== 下载合同文件 ===");
byte[] bytes = service.downloadContract(Dict.create().set("contractNo", contractNo));
return bytes;
}
前端获取文件流的方法:
?
import { download } from @/utils/download
import { axios } from @/utils/request
?
async downloadFile (contractNo) {
const res = await axios.get(this.downloadContractFilePath + contractNo, {
// 设置返回数据类型,这里我设置的是"arraybuffer";
如果不设置则下载下来的pdf会是空白
responseType: arraybuffer
})
// 调用封装好的下载函数
download(res, application/pdf;
charset=UTF-8, moment().format(YYYYMMDD) + .pdf)
}
关于
responseType
可参考官网:XMLHttpRequest.responseType - Web API 接口参考 | MDN (mozilla.org)3. 点击标签a最后我们创建一个标签a,来点击下载文件
<
a @click="downloadFile(contractNo)">
点击下载<
/a>
总结
- 如果后台返回的是文件地址,那么前端直接通过
window.location.href
加文件地址,就可以下载文件; - 如果后台返回的是文件流,那么前端就需要做一些处理:就是将文件流转为文件,然后再模拟点击,进行下载。
推荐阅读
- 第三章-字符串#yyds干货盘点#
- #yyds干货盘点#dart系列之:创建Library package
- 如何正确提出数据需求
- 冒泡排序
- 模拟实现库函数strlen,strcpy,strstr,memmove,memcpy,strcat
- RocketMQ(消息存储机制详解与源码解析)
- 程序自动化与进程的含义
- 解密并发幕后黑手(线程切换引发的原子性问题)
- [年薪60W分水岭]基于Netty手写实现Apache Dubbo(带注册中心和注解)