导出文件需要注意的地方

最新推荐文章于 2023-08-12 00:17:51 发布

Blanche_qiu

最新推荐文章于 2023-08-12 00:17:51 发布

阅读量315

点赞数

分类专栏：代码规范经验文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_41306452/article/details/129465166

版权

经验同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

代码规范

5 篇文章 0 订阅

订阅专栏

文章讲述了如何在前端通过newBlob处理数据流，使用window.URL.createObjectURL创建下载链接，结合a标签实现文件下载。同时，强调了后端返回数据类型可能是ArrayBuffer或Blob，并展示了相应的接口请求配置示例。

摘要由CSDN通过智能技术生成

1、导出文件的方式是以将二进制数据流使用new Blob([数据流],{type:‘文件类型，参考网络响应体的Content-Type’})将数据包裹起来，然后使用window.URL.createObjectURL(放入)去创建一个下载文件流的链接，再创建一个a链接，把a链接的href设置成刚刚创建的对象，通过a.click()的方式下载，具体代码：

	  const url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', '文件名不加后缀')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(link.href)

2、请求接口的配置需要注意，后端返回的是buffer则是arraybuffer，如果是二进制流则是blob

{
    method: 'get',
    url: `/system/tenant/export`,
    params,
    responseType: 'arraybuffer',//arraybuffer或blob
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }