阅读 239

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

一、使用FileSaver.js(推荐)

  • 无论后台返回是文件地址还是二进制blob文件,均可兼容实现下载
使用步骤:
  1. npm安装
npm install file-saver --save
复制代码
  1. 文件引用
import FileSaver from 'file-saver'
复制代码
  1. 业务使用
// file为文件(文件地址或后台返回的二进制blob文件)
// fileName为文件名称
FileSaver.saveAs(file, fileName)
复制代码
  1. 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对象
复制代码

参考:

文章分类
前端
文章标签