js将后端返回的文件流导出为excel，并自定义下载文件名

Posted 2022-12-16 铁锤妹妹@

一. 需求

后台管理系统，常会出现导出excel表格功能；点击导出按钮，请求后端接口，需要将接口返回的文件流导出为excel，实现前端下载excel文件。
但是，返回的数据获取 response 时出现乱码，如图：

二. 实现思路

1. 调用后端下载接口，获取传递过来的二进制数据流
2. 创建<a>标签
3. 创建下载链接；将Blob对象转化为一个URL资源地址，这个地址是一个本地地址
4. 将a标签添加到body中
5. 添加点击事件，进行下载
6. 下载完成后移除a标签

三. 了解概念

在写代码之前，先来了解几个概念。当然也可以跳过这部分，直接看代码。

1）responseType
responseType 的作用就是设置ajax数据响应的类型，你告诉服务器，让服务器返回什么样的数据类型给你
服务器响应的数据类型，可以是 arraybuffer, blob, document, json, text, stream，默认是’json’

2）Blob() 构造函数
Blob() 构造函数文档

Blob() 构造函数返回一个新的 Blob 对象，blob 的内容由参数数组中给出的值的串联组成。（通俗点说，Blob对象可以看做是一个存储二进制数据的容器)

语法：

var aBlob = new Blob( array, options );

参数：

1. array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。
2. options 是一个可选的，它可能会指定如下两个属性：
   1）type，默认值为 “”，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。比如：type: ‘application/x-excel’ 或 type: ‘text/plain’
   2）endings，默认值为"transparent"，用于指定包含行结束符\\n的字符串如何被写入。它是以下两个值中的一个：“native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 “transparent”，代表会保持 blob 中保存的结束符不变 非标准

示例：

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含 DOMString 的数组
var MyBlob = new Blob(aFileParts, type : 'text/html'); // 得到 blob对象
console.log(MyBlob, 'MyBlob')

打印结果：

3）URL.createObjectURL()
官方文档介绍 URL.createObjectURL()

通过创建URL对象指定文件的下载链接。

语法：

objectURL = URL.createObjectURL(object);
//参数object：用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​
//返回值：包含了一个对象 URL，该 URL 可用于指定源 object的内容。

示例：

  const aFileParts = ['<a id="a"><b id="b">hey!</b></a>'] // 一个包含 DOMString 的数组
  const MyBlob = new Blob(aFileParts,  type: 'text/html' ) // 得到 blob
  const objectURL = window.URL.createObjectURL(MyBlob)  // 创建新的URL表示指定的File对象或者Blob对象。
  console.log(objectURL, 'objectURL')
  window.URL.revokeObjectURL(objectURL); // 释放内存

打印结果：

注意内存管理

在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

四. 代码实现

在src/utils下新建tool.js（代码如下），封装成一个方法暴露出去，方便其他页面调用。

import XEUtils from 'xe-utils'

export function exportCsv(csv:any, title:string) 
  const t = XEUtils.toDateString(Date.now(), 'yyyy-MM-dd')  // 当前日期
  const filename = `$t + title.csv` // 拼接文件名

  const blob = new Blob([csv])  //创建一个新的 Blob 对象
  const url = window.URL.createObjectURL(blob)  //  把一个blob对象转化为一个Blob URL，创建下载链接
  const downloadLink = document.createElement('a')  // 生成一个a标签
  downloadLink.href = url
  downloadLink.download = filename  // // dowload属性指定下载后文件名
  document.body.appendChild(downloadLink) //将a标签添加到body中
  downloadLink.click() // 点击下载
  document.body.removeChild(downloadLink)  // 下载完成后移除元素
  window.URL.revokeObjectURL(url); // 释放掉blob对象

其次就是 调用接口了
在调用接口 封装了 axios
所以 在请求后台接口时，要在请求头上要注意加上 responseType: 'blob'

import request from '@/request/http.ts'
GETMONEYLISTDOWN( // 资金记录导出接口
    page = 0,
    size = 10,
  ) 
    return request(
      method: 'post',
      responseType: 'blob', //注意 需要规定后台返回文件流格式
      data: Object.assign(
        
          page,
          pagesize: size,
          method: 'Money.Moneylist'
        ,
        tokenQuery()
      )
    )
  ,

// 页面调用
import  exportCsv  from '@/utils/tool.ts'

function downLoad(e) 
  tableLoading.value = true
  const params = Object.assign(apiParams, e)
  moneyApi.GETMONEYLISTDOWN(Object.assign(, params)).then(res => 
  // 传入二进制流data和文件名
    exportCsv(res.data, '资金记录')
    tableLoading.value = false
  ).catch(error => 
    tableLoading.value = false
    console.log(error)
  )

可参考：
excel导出-将后端返回的文件流导出为excel