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

Posted 铁锤妹妹@

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js将后端返回的文件流导出为excel,并自定义下载文件名相关的知识,希望对你有一定的参考价值。

一. 需求

后台管理系统,常会出现导出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

以上是关于js将后端返回的文件流导出为excel,并自定义下载文件名的主要内容,如果未能解决你的问题,请参考以下文章

前端接收后端返回的文件流导出Excel

vue中使用axios处理post方法导出excel表格(后端返回文件流)

vue3导出表格excel(支持多sheet页),并自定义导出样式

java后端返回多个文件给前端打开

java中使用poi导入导出excel文件_并自定义日期格式

纯前端导出表格