vue项目-pdf预览和下载，后台返回文件流形式

Posted 2023-04-20

参考技术A 1、接口封装

2、页面

后端借鉴链接： https://blog.csdn.net/jinold/article/details/96836230

前端借鉴链接： https://www.jianshu.com/p/950cb898c978?utm_campaign=hugo

vue-以文件流的形式-下载-导出文件

vue项目中，经常遇到文件导出与下载，有时候是直接返回服务端的文件url,这样直接以a链接下载，或者windown.open对不同类型的文件进行下载或预览。但如果返回的是文件流，则需要做一些其他处理，具体形式如下：

1、首先要确定服务器返回的数据类型。

　　在请求头中加入： config.responseType = ‘blob‘

　　有时候，不是所有接口都需要该类型，则可以对接口做一个判定：

// request拦截器
service.interceptors.request.use(
  config => {
　　 // 根据接口判定
    if ( config.url === ‘/setting/exportData‘ ||
    config.url.indexOf(‘export‘) > -1 ||
    config.url.indexOf(‘Export‘) > -1) {
      config.responseType = ‘blob‘  // 服务请求类型
    }
    if (getToken()) {
      config.headers[‘access_token‘] = getToken()
    }
    return config
  },
  error => {
    // Do something with request error
    // console.log(error) // for debug
    Promise.reject(error)
  }
)

2、接口请求获取后端返回的文件流

// 导出
    onExport() {
      if (this.dataList === ‘‘) {
        this.$message({
          type: ‘error‘,
          message: ‘暂无数据导出‘
        })
        return
      }
      const fd = new FormData()
      fd.append(‘id‘, this.id)
      var exportFileName = ‘导出文件名‘ //设置导出的文件名，可以拼接一个随机值
      exportData(fd)
        .then(res => {
          // res.data  是后端返回的文件流
          // 调用 downloadUrl 处理文件
          downloadUrl(res.data, exportFileName)
        })
        .catch(err => {
          this.$message({
            type: ‘error‘,
            message: err.message
          })
        })
    },    

3、文件处理downloadUrl--该方法可以写为公共方法以便调用

// 使用iframe框架下载文件--以excel为例，可修改type与fileName选择文件类型
export function downloadUrl(res, name) {
  const blob = new Blob([res], { type: ‘application/vnd.ms-excel‘ }) // 构造一个blob对象来处理数据
  const fileName = name + ‘.xlsx‘ // 导出文件名
  const elink = document.createElement(‘a‘) // 创建a标签
  elink.download = fileName // a标签添加属性
  elink.style.display = ‘none‘
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click() // 执行下载
  URL.revokeObjectURL(elink.href) // 释放URL 对象
  document.body.removeChild(elink) // 释放标签
}

4、在ie浏览器中存在兼容性问题，对downloadUrl做一些调整

// 使用iframe框架下载文件 -兼容性考虑
export function downloadUrl(res, name) {
  const blob = new Blob([res], { type: ‘application/vnd.ms-excel‘ })
  // for IE
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    const fileName = name + ‘.xlsx‘
    window.navigator.msSaveOrOpenBlob(blob, fileName)
  } else {
    // for Non-IE (chrome, firefox etc.)
    const fileName = name + ‘.xlsx‘
    const elink = document.createElement(‘a‘)
    elink.download = fileName
    elink.style.display = ‘none‘
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
  }
}

总结：至此，以文件流的形式导出文件的一种方式便已经实现。