位置: IT常识 - 正文

js将后端返回的文件流导出为excel,并自定义下载文件名(js返回上一步操作)

编辑:rootadmin
js将后端返回的文件流导出为excel,并自定义下载文件名 一. 需求

推荐整理分享js将后端返回的文件流导出为excel,并自定义下载文件名(js返回上一步操作),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:后端返回前端json,后端返回前端json,js 后端,js将后端返回的json行转列,js获取后端返回的数据,后端返回的json数据怎么处理,后端返回前端json,后端返回前端json,内容如对您有帮助,希望把文章链接给更多的朋友!

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

二. 实现思路调用后端下载接口,获取传递过来的二进制数据流创建<a>标签创建下载链接;将Blob对象转化为一个URL资源地址,这个地址是一个本地地址将a标签添加到body中添加点击事件,进行下载下载完成后移除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 );

参数:

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

示例:

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

本文链接地址:https://www.jiuchutong.com/zhishi/295371.html 转载请保留说明!

上一篇:el-switch(el-switch右对齐)

下一篇:【Vue3】发送post请求出现400 Bad Request 报错(vue发送post请求如何传两个参数)

  • 房地产企业税收优惠政策
  • 一般纳税人转小规模最新政策2022
  • 所得税费用是什么要素
  • 小规模季报利润表本月金额和本年累计金额
  • 增值税普通发票几个点
  • 财务报表中利润率怎么算
  • 土地使用权增资方案
  • 怎么确定印花税申报成功
  • 补交以前年度增值税的科目处理
  • 组织投标工作
  • 政府扶持资金科目怎么做?
  • 怎样冲回多计提的费用
  • 该企业本月发生如下经济业务
  • 公司试驾车购置税怎么交
  • 行政事业单位工会经费支出范围
  • 快递费需要计提吗
  • 公司用上年多缴的社保
  • 房租发票进项税额抵扣
  • 法人给公司基本户打款
  • 企业代收代缴水电费出现差额怎么解释
  • 分期收款什么是分期还款
  • 工资五险一金缴费标准是多少
  • 房产税计税依据是含税还是不含税
  • win 10 请稍后
  • 企业如何选择会计准则
  • 资产利润率和资本利润率监管标准
  • 拍卖公司财务
  • 劳务费费用
  • php5.4+mysql
  • windows无法配置用户文件
  • 减半征收所得税的有哪些
  • 政策性搬迁会计处理案例
  • 车船税怎么计账
  • 支付境外设计费合同备案流程
  • ihs.exe是什么
  • php上传图片大小限制
  • 解读一篇文章
  • 个人所得税减免政策2023
  • 个体户怎么开发票免税
  • 时点数和时期数 订单量 库存量点击量
  • yolov3目标检测
  • java基础变量字节
  • 公司电脑配件也要交税吗
  • 外包食堂可以开专票吗
  • 装修公司开增值税专用发票几个点
  • db2教程
  • 营业外收入汇算清缴时也得计入收入
  • 不抵扣勾选有什么风险
  • 合伙企业分配利润会计分录
  • 运输费抵扣进项税怎么算
  • 收到房租的租金怎么做账
  • 公司收到拆迁补偿金,于评估公司的区别
  • 去年购进的货物怎么做账
  • 企业解散清算程序
  • 会计账簿按用途分类分为什么
  • MySQL之Field‘***’doesn’t have a default value错误解决办法
  • windows下mysql 5.7版本中修改编码为utf-8的方法步骤
  • XP系统安装不了游戏
  • windows超级管理员默认密码
  • linux chkdsk
  • win7如何开启蓝牙功能
  • Win7系统安装方法
  • win8.1使用
  • 遮罩层在上还是在下
  • adt Failed to create the Java Virtual Machine.
  • shader教程
  • 对于javascript理解
  • 特征提取技术
  • android ui线程和主线程的区别
  • jquery技巧
  • 创业要看的书
  • js实现css样式
  • python 数据结构库
  • python做开发
  • javascript初级教程
  • Developing for Android, III: The Rules: Performance
  • pycharm sftp
  • 个体工商户个人所得税
  • 常规巡察和专项巡察相结合
  • 湖南税务局发票查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设