一、使用FileSaver.js（推荐）
- 无论后台返回是文件地址还是二进制blob文件，均可兼容实现下载
使用步骤：
- npm安装
npm install file-saver --save
- 文件引用
import FileSaver from 'file-saver'
- 业务使用
FileSaver.saveAs(file, fileName) // file为文件（文件地址或后台返回的二进制blob文件）,fileName为文件名称
- DEMO
- html
<button @click="downloadPDF">下载pdf</button>
<button @click="downloadImg">下载图片</button>
<button @click="downloadBlob">下载二进制文件</button>
- js
downloadPDF() {
const PDFFile = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
const PDFFileName = '测试pdf'
FileSaver.saveAs(PDFFile, PDFFileName)
},
downloadImg() {
const ImgFile = 'http://bpic.588ku.com/element_origin_min_pic/18/08/24/05dbcc82c8d3bd356e57436be0922357.jpg'
const ImgFileName = '测试jpg'
FileSaver.saveAs(ImgFile, ImgFileName)
},
async downloadBlob() {
// 注：如要下载后台的blob文件流，必须在axios请求配中添加responseType: 'blob'，否则解析失败！！！
const res = await axios.get('XXXX', {
responseType: 'blob'
})
const blobName = '二进制文件'
FileSaver.saveAs(res, blobName)
},
参考：
二、下载普通文件，使用window.open()
- 仅支持普通文件下载，不支持文件流下载
- word、excel会直接下载，图片、pdf则会跳转到预览页（需用户手动下载）
三、下载文件流，使用new Blob()，再通过模拟点击事件完成下载
- 仅支持文件流下载
- 须在axios请求配中添加responseType: 'blob'，接受后台返回的blob值
const res = await axios.get('XXXX',
{responseType: 'blob'}
)
const blob = new Blob([res], {
// type值如后台设置，前端可省略，具体type值可参考https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
type: 'application/octet-stream'
})
const downloadElement = document.createElement('a') //创建a标签
const href = window.URL.createObjectURL(blob) //创建DOMString
const filename = "测试下载" //设置文件名字
downloadElement.style.display = 'none' //隐藏a标签
downloadElement.href = href //赋值a标签的href
downloadElement.download = filename //下载后文件名
document.body.appendChild(downloadElement) //插入a标签
downloadElement.click() //点击下载
document.body.removeChild(downloadElement) //下载完成移除元素
window.URL.revokeObjectURL(href) //释放掉blob对象
参考：
