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

一、使用FileSaver.js（推荐）

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

使用步骤：

npm安装

npm install file-saver --save

文件引用

import FileSaver from 'file-saver'

业务使用

// file为文件（文件地址或后台返回的二进制blob文件）
// fileName为文件名称（结尾必须包含文件格式如.pdf）
FileSaver.saveAs(file, fileName)

DEMO

html

<button @click="downloadPDF">下载pdf</button>
<button @click="downloadImg">下载图片</button>
<button @click="downloadBlob">下载二进制文件</button>

downloadPDF() {
  const PDFFile = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
  const PDFFileName = '测试pdf.pdf'
  FileSaver.saveAs(PDFFile, PDFFileName)
},
downloadImg() {
  const ImgFile = 'http://bpic.588ku.com/element_origin_min_pic/18/08/24/05dbcc82c8d3bd356e57436be0922357.jpg'
  const ImgFileName = '测试jpg.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对象

参考：