纯前端实现
直接下载服务器的静态资源
<a href="文件链接(确定的url地址)" download='下载文件名'></a>
// !但是其中的download对应音频文件和视频文件无效
// `location.href`、`window.open()`等也可以实现
前后端配合实现
实现思路:
1、前端通过发送数据或参数给到后端
2、在由后端根据接收的数据生成文件
3、然后后端在响应请求头中设置
Content-disposition:attachment;filename="fliename.fileType"
4、前端接收到响应文件信息后对数据进行处理,实现下载。
注意:后端返回的数据类型常见的有:数据流和base64,前端对其处理的方式也不一样,终极目标都是处理成blob对象,供URL.createObjectURL(blob)调用
实现代码
代码:
// blobData 后台返回的文件流二进制数据
// fileName 自定义文件名称
// suffixName 文件后缀名
// fileType 文件后缀名对应的type值
function exportFile(blobData, fileName, suffixName, fileType) {
let blob = new Blob([blobData], { type: fileType })
let downloadElement = document.createElement('a')
let href = window.URL.createObjectURL(blob) // 创建下载的链接
downloadElement.href = href
downloadElement.download = fileName+ suffixName // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
}
//示例:
exportFile(blobData, '订单明细', '.xls', 'application/vnd.ms-excel');
知识点:
一、object = new Blob( array, options );
// 1、Blob()构造函数返回一个新的Blob对象。 blob的内容由参数数组中给出的值的串联组成。
// 2、array是一个由ArrayBuffer、ArrayBufferView、Blob, DOMString等对象构成的 Array,或者其他类似对象的混合体
二、objectURL = URL.createObjectURL(object);
// 1、它可以获取当前文件的一个内存URL。然后把该URL地址给a标签即可。
// 2、参数object是:用于创建 URL 的 File对象、Blob对象或者 MediaSource对象。
三、经过研究,了解到,后端返回的是一段文本流,然后需要前端转成文件进行下载。
拿到返回的文件流,进行转换,文件的名字可以自己定义。
整理几个常用的 Blob 的配置关系对应表
后缀名 | 文件类型 | 类型(type) |
---|---|---|
.xls | Microsoft Excel | application/vnd.ms-excel |
.xlsx | Microsoft Excel (OpenXML) | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
.csv | CSV | text/csv |
.doc | Microsoft Word | application/msword |