前端实现文件下载的所有方式

1,241 阅读2分钟

纯前端实现

直接下载服务器的静态资源

<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)
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csvCSVtext/csv
.docMicrosoft Wordapplication/msword