下载文件

下载文件、（Blob数据流）下载PDF
导出excel 注：后端返回的二进制blob流

方法一 （a标签）

downloadFile(file) {
        let url= '你的文件地址'
        const elink = document.createElement("a");
        elink.href = url;
        elink.style.display = "none";
        elink.setAttribute("download", file.name);//file.name文件名称
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
 },

方法二 （Blob数据流）下载PDF

downloadFile(row) {
      let params = {
        Id: row.Id
      }
      this.$http({
        url: '你的接口地址',
        method: 'get',
        responseType: 'arraybuffer',  --------------必填
        params: params
      }).then(res => {
        const binaryData = []
        binaryData.push(res)
        let url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))  //application/pdf类型
        const elink = document.createElement('a')
        elink.href = url
        elink.style.display = 'none'
        elink.setAttribute('download', '你的文件名称')
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      })
    },

方法三 导出excel (后端返回的二进制blob流)

在响应拦截器里面判断一下是否是Blob流。===》默认是JSON

安装依赖

npm i file-saver

在页面中

//引入
import FileSaver from 'file-saver'

//获取excel的二进制blob流
 async exportUser() {
     const result = await exportUser() // 导出所有的人员接口
     // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
     // FileSaver.saveAs(blob对象,文件名称)
     FileSaver.saveAs(result, '员工信息表.xlsx') // 下载文件
 },

api

export function exportUser() {
  return request({
    url: '/sys/user/export',
    // 改变接收数据的类型
    responseType: 'blob' // 使用blob接收二进制文件流
  })
}