后端接口返回文件流格式、前端如何实现文件下载导出呢?

在项目开发过程中,难免会需要实现文件下载功能,记录下自己实际开发过程过程中遇到两种实现的方式。一种:后端直接返回加密url ,前端解密后直接使用 a标签下载就可以,这种方法相等比较简单,另一种:后端接口直接返回文件流,这种方式前端就需要单独封装对应的请求方法进行处理,因为这种方式使用不多,为了方便后续使用加深印象,将解决方法记录下来方便后续查阅。

完整代码

post请求
function postDownload(url, data, fileName) {
  return axios({
    // 用axios发送post请求
    url: preUrl + url, // 请求地址
    data, // 参数
    method: 'post',
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => {
      // 处理返回的文件流
      // 获取http头部的文件名信息,若无需重命名文件,将下面这行删去
      if (!fileName) fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1])

      /* 兼容ie内核,360浏览器的兼容模式 */
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      /* 兼容ie内核,360浏览器的兼容模式 */
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        /* 火狐谷歌的文件下载方式 */
        let url1 = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url1

        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
      }
      Message({
        message: '导出成功',
        type: 'su***ess',
      })
      return Promise.resolve(res.data)
    })
    .catch((err) => {
      Message({
        message: err,
        type: 'error',
      })
      return Promise.resolve(err)
    })
}

get 请求
function getDownload(url, data, fileName) {
  return axios({
    // 用axios发送get请求
    url:url, // 请求地址
    params: data, // 参数
    method: 'get',
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => {
      // 处理返回的文件流
      // 获取http头部的文件名信息,若无需重命名文件,将下面这行删去
      if (!fileName) fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1])

      /* 兼容ie内核,360浏览器的兼容模式 */
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      /* 兼容ie内核,360浏览器的兼容模式 */
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        /* 火狐谷歌的文件下载方式 */
        let url1 = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url1
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
      }
      Message({
        message: '导出成功',
        type: 'su***ess',
      })
      return Promise.resolve(res.data)
    })
    .catch((err) => {
      Message({
        message: err,
        type: 'error',
      })
      return Promise.resolve(err)
    })
}
responseType: ‘blob’ 说明

后端接收返回的二进制文件流,axios 本身不回去处理,但是接口返回的内容浏览器会接收对应的内容,但是接收到的内容是这样的:

这样的文件无法看懂,因为axios 本身是不做二进制文件流处理的;

这里就需要给 axios 添加 responseType: ‘blob’,

 return axios({
    // 用axios发送get请求
    url:url, // 请求地址
    params: data, // 参数
    method: 'get',
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
    },
  })
获取保存文件名称
// 获取http头部的文件名信息,若无需重命名文件,将下面这行删去
if (!fileName) fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1])

可以传入要保存的文件名称,也可以直接获取接口返回的文件名称;

处理下载文件
 /* 兼容ie内核,360浏览器的兼容模式 */
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      /* 兼容ie内核,360浏览器的兼容模式 */
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        /* 火狐谷歌的文件下载方式 */
        let url1 = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url1
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()

因为在测试过程种发现不同浏览从下载有问题,这里做了 ie 内核浏览器和 谷歌、 火狐、浏览器下载处理,实现方式其实也就是使用a 标签的下载数据, 给a标签设置 属性 download
自动执行点击下载,就实现了调用接口后将文件下载导出了!!!!!!!!!!!!!!

转载请说明出处内容投诉
CSS教程_站长资源网 » 后端接口返回文件流格式、前端如何实现文件下载导出呢?

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买