前端JS下载普通文件（word、excel、pdf等）和二进制blob文件

一、使用FileSaver.js（推荐）

• 无论后台返回是文件地址还是二进制blob文件，均可兼容实现下载

使用步骤：

1. npm安装

npm install file-saver --save

2. 文件引用

import FileSaver from 'file-saver'

3. 业务使用

FileSaver.saveAs(file, fileName)  // file为文件（文件地址或后台返回的二进制blob文件）,fileName为文件名称

4. DEMO

• html

下载pdf
下载图片
下载二进制文件

• 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)
},

参考：

• FileSaver
• How to trigger the direct download of a PDF with JavaScript
• 使用js直接下载pdf文件而不用在新的浏览器窗口打开

二、下载普通文件，使用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对象

参考：

• MDN中Blob的定义
• 常见 MIME 类型列表
• 前端下载普通文件与二进制流文件