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

  • 房产税纳税义务人
  • 补缴的税款和罚款的会计处理
  • 企业对外投资收益税收
  • 哪些发票可以抵扣税
  • 免抵退税申报资料情况表在哪下载
  • 增值税进项加计扣除计入哪个科目
  • 国税地税电子钥匙价格
  • 母子公司借款要交什么税
  • 工业企业制造费用具体怎么摊
  • 基金投资债券会赔吗
  • 企业所得税税收优惠政策
  • 退税降低
  • 外购技术服务费包括哪些
  • 收到股东借款的现金
  • 材料采购定期结算表
  • 设备安装增值税适用税率
  • 销售固定资产可以开专票吗
  • 生产企业出口退税流程及账务处理
  • 个人所得税怎么查工资明细
  • 企业减免税会计分录
  • 账本印花税计税金额或件数怎么申报2023
  • 劳务派遣公司会扣工资吗
  • 非货币性资产交换准则
  • 递延所得税资产怎么计算
  • 增值税税控盘服务费可以每年都抵扣吗
  • 发票入账后还能冲红吗
  • 外贸公司是做什么的 经营范围是什么
  • 企业识别码怎么查询
  • 财政指标文和拨款流程
  • php cookie 登录
  • 银行承兑汇票质押率90%
  • 若依框架前端框架
  • 普通发票丢了如何入账
  • 认缴制注册资金不交可以吗
  • 企业所得税税前扣除凭证管理办法
  • 企业停产免征房产税
  • 劳务佣金合法吗?
  • 在高地陶恩山脉的滑雪旅行,奥地利巴德加斯坦 (© RooM the Agency/Alamy)
  • web应用程序的主要组成部分
  • vue调用高德js
  • vports命令怎么用
  • php单例模式
  • python打印矩形方阵
  • 税务稽查补税
  • 关于在使用手机
  • 年底全年的研发费用占比
  • 租赁厂房对方不租怎么办
  • 无形资产入账价值包括费用化支出吗
  • 土地流转的基本原则包括哪些
  • 部门费用的核算包括
  • 专票遗失没有认证能用吗
  • sql server 修改
  • sql实用教程
  • sql语句的高级用法
  • OS X 10.12.6 beta 1如何更新 OS X 10.12.6 beta 1如何升级
  • 在苹果电脑mac上怎么下载
  • windos8怎么样
  • win10系统优化的方法
  • cocos creator打包
  • Particle system study section 1
  • android界面切换与数据传递
  • 微信小程序开发用什么语言
  • jquery点击事件写法
  • javascript深入理解
  • jquery倒计时60秒
  • 传智播客javappt
  • javascript可以制作哪些游戏?
  • jquery unload
  • javascriptcom
  • jquery audio
  • jquery控制元素的显示与隐藏
  • 税控盘登录密码忘了怎么办怎么重置
  • 昆山华润燃气多少钱一方
  • 衡水市地税局
  • 长春税务局电话举报
  • 增值税减免税备案
  • 定额发票怎么入账
  • 江西医保在线缴费
  • 税务局看场地要给红包吗
  • 代扣app有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设