前端接收 type: “application/octet-stream“ 格式的数据并下载

第一步在拦截器中设置:

service.interceptors.response.use(
  response => {
    const headers = response.headers
    if (headers['content-type'] === 'application/octet-stream;charset=utf-8') {
      return response.data
    }
  ...其他情况
  }
)

第二步在axios 请求时设置:

export function exportAudit(query) {
  return request({
    url: 'xxxx',
    method: 'get',
    responseType: 'blob',
    params: query
  })
}

第三步,请求接口返回值时设置:

handleExport() {
      exportAudit(this.query).then(response => {
        console.log(response)
        const blob = new Blob([response.data])
        const fileName = 'XXX导出.xlsx'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')//创建一个a标签通过a标签的点击事件区下载文件
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)//使用blob创建一个指向类型数组的URL
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }

这样就导出文档流内容了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户...
    桂_3d6b阅读 960评论 0 0
  • Html5 语义化标签 headerfooternavarticlesection 文档类型定义 在h5中只需要写...
    路人丁0417阅读 1,221评论 0 2
  • 正在更新中... 声明:所有文章都是转载整理的,只是为了自己学习,方便自己观看,如有侵权,请立即联系我,谢谢~ V...
    是河兔兔啊阅读 4,695评论 0 1
  • 关于webpack面试题(点击查看原文[https://www.cnblogs.com/gaoht/p/11310...
    苏苡阅读 339评论 0 1
  • 声明:所有文章都是转载整理的,只是为了自己学习,方便自己观看,如有侵权,请立即联系我,谢谢~ Vue -渐进式Ja...
    是河兔兔啊阅读 30,238评论 0 13

友情链接更多精彩内容