位置: 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请求如何传两个参数)

  • 微信营销方法很多,而你只是需要找到适合你的那一种(微信营销主要手段和技巧)

    微信营销方法很多,而你只是需要找到适合你的那一种(微信营销主要手段和技巧)

  • 米家摄像头换了wifi怎么重新连接(米家摄像头换了wifi连接不上)

    米家摄像头换了wifi怎么重新连接(米家摄像头换了wifi连接不上)

  • 360浏览器如何将主页设为百度(360浏览器如何将网页发送到桌面快捷方式)

    360浏览器如何将主页设为百度(360浏览器如何将网页发送到桌面快捷方式)

  • 淘宝领券一直提示群众太热情(淘宝领券一直提示群众太热情找哪个部门投诉)

    淘宝领券一直提示群众太热情(淘宝领券一直提示群众太热情找哪个部门投诉)

  • 手机关机定位能找到吗(手机关机定位能精确到什么位置)

    手机关机定位能找到吗(手机关机定位能精确到什么位置)

  • bios找不到power菜单(win7bios找不到power菜单)

    bios找不到power菜单(win7bios找不到power菜单)

  • 苹果手机7如何分屏(苹果手机7如何截图截屏)

    苹果手机7如何分屏(苹果手机7如何截图截屏)

  • 淘宝亲情账号可以看消费记录吗(淘宝亲情账号可以直接付款吗)

    淘宝亲情账号可以看消费记录吗(淘宝亲情账号可以直接付款吗)

  • wps为什么前面空白但是字上不去(wps前面不能空格)

    wps为什么前面空白但是字上不去(wps前面不能空格)

  • 一个手机能注册几个健康码(一个手机能注册两个闲鱼号吗)

    一个手机能注册几个健康码(一个手机能注册两个闲鱼号吗)

  • 抖音设置了私密账号作品就上不了热门了吗(抖音设置了私密账号别人能看到我的关注吗)

    抖音设置了私密账号作品就上不了热门了吗(抖音设置了私密账号别人能看到我的关注吗)

  • 什么是拒绝式服务攻击(什么叫拒绝)

    什么是拒绝式服务攻击(什么叫拒绝)

  • 华为怎么进入安全模式(华为怎么进入安全模式能用微信)

    华为怎么进入安全模式(华为怎么进入安全模式能用微信)

  • 京东取消订单钱会退吗(京东取消订单钱到账了东西送过来了)

    京东取消订单钱会退吗(京东取消订单钱到账了东西送过来了)

  • 个人计算机属于(个人计算机属于小型计算机)

    个人计算机属于(个人计算机属于小型计算机)

  • iPhone11pro摄像头像素是多少(iphone11pro摄像头不对焦)

    iPhone11pro摄像头像素是多少(iphone11pro摄像头不对焦)

  • 电视家怎么看回放(电视家怎么看回放节目)

    电视家怎么看回放(电视家怎么看回放节目)

  • 抖音能不能投屏到电视(抖音能不能投屏到小米电视)

    抖音能不能投屏到电视(抖音能不能投屏到小米电视)

  • 小米9se有没有红外线(小米9红色)

    小米9se有没有红外线(小米9红色)

  • 怎么激活win10 win10激活密钥推荐 附激活工具(怎么激活win10专业版)

    怎么激活win10 win10激活密钥推荐 附激活工具(怎么激活win10专业版)

  • initdb命令  初始化数据库(init 4命令)

    initdb命令 初始化数据库(init 4命令)

  • 小规模纳税人缴纳企业所得税
  • 交易性金融资产是什么意思
  • 银行共管账户现在可以开设吗
  • 存货盘盈如何处理
  • 社保公积金计提是本月计提下月
  • 计提社保贷方科目是什么
  • 想要自己开厂应该怎么做
  • 残保金申报表中的上年工资总额指所属期的上一年吗
  • 小规模季度超过45万了怎么缴纳
  • 居民企业核定征收企业所得税的情形有哪些
  • 参加会议需要用身份证吗
  • 长期待摊费用当月增加当月摊销吗
  • 企业给员工购买的团体意外险的被保险人一般是
  • 增值税抵扣凭证包括农产品收购发票
  • 税会差异例子
  • 停车管理费收费依据
  • 财税()
  • 本月已认证发票还能撤销吗
  • 企业营业利润为负的原因有哪些
  • 赊销商品填制什么科目
  • 如何修改mac系统密码
  • macbookpro安装mysql
  • 超市消费券买什么好
  • 为员工租房租金怎么入账
  • 住房贷款利息支出专项附加抵扣
  • 差额征收增值税 取得的进项可否抵扣
  • 四个常见html网页乱码问题及解决办法
  • 外商投资企业有哪些出资方式
  • 房地产土地使用税核减条件
  • ros 2
  • 超过小规模纳税人标准能不转一般纳税人吗?
  • 怎么计提企业所得税
  • 实际缴纳消费税计算公式
  • ai线型工具介绍
  • 小程序项目开发流程
  • 销项负数发票需要入账吗
  • 发票写的是信息怎么办
  • Joe是一款优雅功能强大的Typecho主题功能多上手快
  • 销售商品的收入属于收入吗
  • 还银行贷款怎么做凭证
  • 预扣预缴申报未缴税款
  • 可供分配利润的会计分录
  • mongodb使用案例
  • 股东借款作为项目投入的依据
  • 员工的生日津贴怎么发
  • 固定资产折旧方法一经确定不得随意变更
  • MySQL中使用命令行查看二进制文件
  • 客户多付的货款 不用退回 进营业外收入吗
  • 弹性预算列表法
  • 公司收到加盟费会计分录
  • 以前年度损益调整
  • 销售折让的会计分录怎么做
  • 销售退回的会计分录全过程
  • 进口关税减免政策
  • 差旅费中住宿费的标准是什么
  • 印花税的范畴
  • 可以抵扣进项税的项目包括
  • 经营所得与劳务所得的直别
  • 取得投资时支付的相关税费
  • 最新职工福利费列支范围
  • Red Hat Enterprise Linux AS4( 企业版4.0下载)
  • 怎么调整桌面图标间距
  • 无法安装windows xp
  • win10推送win11
  • Win10 Mobile Build 10586.29更新内容大全:修复多项问题
  • 晚上睡觉艾草贴肚脐
  • 用javascript
  • javascript中的this
  • android真机调试解析包错误
  • angularjs阻止冒泡
  • linux如何创建守护进程
  • 关于echo的名字
  • JavaScript+html5 canvas实现图片破碎重组动画特效
  • 税务解除非正常户罚款多少
  • 收到补税点的分录
  • 新都税务局咨询电话
  • 按期申报和按次申报的区别
  • 增值税税控系统专用设备及技术维护费
  • 四川省人口数据资料
  • 省国税局领导由谁任命
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设