前端下载通常分为两种情形，一种是后端直接给一个文件地址，通过浏览器打开就可以下载，另外一种则需要发送请求，后端返回二进制流数据，前端解析流数据，生成URL，实现下载。
指定文件路径下载
该方式将下载逻辑放在后端处理，后端给出固定的url，前端使用window.location.herf下载
window.location.herf = '/xxx/xxx/xxxx'
根据请求返回二进制数据流，生成流文件URL下载
该方式是发送请求后端返回二进制数据流，前端解析二进制流生成下载URL，再通过HTML5中<a>标签的download属性实现下载功能。
一、封装解析二进制流数据生成下载URL方法
根据二进制流数据生成下载URL可以有多种方式实现，具体实现如下：
1、将二进制数据封装为BLOB对象
// utils.js
export const download = (res, type, filename) => {
// 创建blob对象，将二进制数据封装为BLOB对象
const blob = new Blob([res], {
// 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel
type: type
})
const a = document.createElement('a')
// 兼容webkix浏览器，处理webkit浏览器中herf自动添加blob前缀，默认在浏览器打开而不是下载
const URL = window.URL || window.webkitURL
// 根据blob对象创建URL 对象，生成本地URL
const herf = URL.createObjectURL(blob)
// 下载链接
a.href = herf
// 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
a.download = filename
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
// 在内存中移除URL 对象
window.URL.revokeObjectURL(herf)
}
2、将二进制数据封装为文件读取FileReader对象
// utils.js
export const download = (res) => {
// 创建文件对象
let reader = new FileReader()
// 监听读取完毕
reader.onloadend = function () {
// 返回base64位的文件内容
let url = reader.result
// 下载
window.location.href = url
}
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
reader.readAsDataURL(res)
}
注意： 使用 FileReader对象封装二进制流之后没办法设置下载的文件名，默认文件名为
下载，文件格式根据读取的是请求返回的content-type。
3、使用插件file-saver
- 下载插件
npm install --save file-saver
- 引入插件
import { saveAs } from 'file-saver'
- 封装下载方法，使用插件
export const downloadFile = (res, type, filename) => {
// 将二进制数据封装成blob对象
const blob = new Blob([res], {
type: type
})
/**
这里也可以使用File对象封装二进制数据
const file = new File([res], filename, {
type: type
});
*/
// 调用插件方法
saveAs(blob,filename)
}
4、使用插件downloadjs
- 下载插件
npm install --save downloadjs
- 引入插件
const download = require('downloadjs')
因为
downloadjs源码中没有通过export导出download方法，而是通过return的方式返回download方法，因为需要使用require来引入文件。
- 封装下载方法，使用插件
export const downloadFile = (res, type, filename) => {
// 将二进制流转成blob对象
const blob = new Blob([res], {
type: type
})
// 调用插件方法
download(blob, filename, type);
}
二、发送请求，获取二进制流数据
// index.vue
<template>
<div>
<button @click='handleDownload'>下载</button>
</div>
</template>
<script>
// 引入下载方法
import {download} from 'utils'
export default{
methods: {
async downloadFile () {
let res = await axios.get(
url: 'xxxx/xxxx',
method: 'GET',
// 设置返回数据类型，这里一定要设置，否则下载下来的文件会是空白,也可以是`arraybuffer`
responseType: 'blob',
params: {
id: 'xxxxxx'
}
)
// 获取在response headers中返回的下载文件类型
let type = JSON.parse(res.headers)['content-type']
/*获取在response headers中返回的下载文件名
因为返回文件名是通过encodeURIComponent()函数进行了编码，因此需要通过decodeURIComponent()函数解码
*/
let fileName = decodeURIComponent(JSON.parse(res.headers)['file-name'])
// 调用封装好的下载函数
download(res, type, fileName)
},
// 点击下载按钮下载
handleDownload() {
this.downloadFile()
}
}
}
</script>
注意：发送请求时一定要注意设置
responseType: 'blob',否则后端返回的数据可能不是二进制流数据。
-
后台返回的二进制数据文件流格式：
文件流.png -
后端返回响应头:
后端返回响应头.png
总结
以上通过了几种方式实现了前端文件下载功能，除了将下载逻辑放在后端处理，直接提供URL下载以外，后面几种方式都是通过前端发送请求，后端返回二进制流数据，然后封装流数据生成URL的方式，只是在打开方式上有所不同。最后使用的两个插件，查看源码也是围绕着a标签的download属性展开，只是做了兼容性处理。具体使用哪种可以根据自己的情况进行选择。
