js导出变量 vue_vue.js前端实现excel表格导出和获取headers里的信息
前段时间写过一篇文章基于element实现后台管理系统,并提到excel表格导出功能,可能描述不是很详细,现在单独整理列出。
后端提供的接口:
// 下载分拣列表
export function getAssormentExport(params) {
return request({
url: '/manage/health/assorment/export?ids=' + params,
responseType: 'arraybuffer', // 代表内存之中的一段二进制数据 必须加
method: 'get'
})
}
vue:点击按钮调用接口
导出选中
script:
// 导出选中
addexport() {
if (this.multipleSelection.length <= 0) {
this.$message({
showClose: true,
message: '未选中数据',
type: 'error'
})
return
}
for (let i = 0; i < this.multipleSelection.length; i++) {
this.ids.push(this.multipleSelection[i].id)
} // push一个新的数组,存储需要导出信息的ID并传给接口实现数据返回
getAssormentExport(this.ids).then(
function(response) {
const filename = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1]) || '分拣表.xlsx'
this.fileDownload(response.data, filename) // response.data是后端返回的二进制数据流,filename是获取到的导出文件名,获取失败使用默认值
this.ids = []
}.bind(this)
).catch(
function(error) {
this.$message({
showClose: true,
message: error,
type: 'error'
})
this.ids = []
}.bind(this)
)
},
fileDownload(data, fileName) {
const blob = new Blob([data], {
type: 'application/octet-stream'
})
const filename = fileName || 'filename.xlsx'
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, filename)
} else {
var blobURL = window.URL.createObjectURL(blob)
var tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download', filename)
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(blobURL)
}
},
查看调用接口返回的信息
备注:
1.response返回了包含响应头所带的所有数据,可以使用console.log(response)查看打印数据,但是打印出来的数据只能拿到默认的响应头,这里有个需要注意的地方。
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
如果想让浏览器能访问到其他响应头的话,需要后端在服务器上设置Access-Control-Expose-Headers
Access-Control-Expose-Headers : 'content-disposition'
后端大致写法:
headers.add("Access-Control-Expose-Headers", "Content-Disposition");
这样response.headers['content-disposition'].split(';')[1].split('=')[1] 就能取到接口返回的文件名称了。
2. decodeURI的使用
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
实例
在本例中,我们将使用 decodeURI() 对一个编码后的 URI 进行解码:
var test1="http://www.w3school.com.cn/My first/"
document.write(encodeURI(test1)+ "
")
document.write(decodeURI(test1))
输出:
http://www.w3school.com.cn/My%20first/
http://www.w3school.com.cn/My first/
js导出变量 vue_vue.js前端实现excel表格导出和获取headers里的信息相关推荐
- 通用Excel表格导出(Map类型数据导出为表格)
背景 为提升代码开发效率,项目使用了通用查询(动态数据表.动态条件.动态列名等),各表查询通过同一个页面展现,前端通过获取路径上的表名调用同一个后端控制器--动态获取到查询条件.数据列名.不同表数据等 ...
- vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
- 微信小程序云开发之用户输入数据后excel表格导出升级版
大家好,我是csdn的小博主lqj_本人,最近在哔哩哔哩开始上传我的制作微信小程序的详细流程,大家可以关注一下哔哩哔哩:小淼前端 本次程序的详细视频教程已上传至哔哩哔哩: 腾讯云开发小程序之用户输入数 ...
- html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
- Springboot之Excel表格导出
Springboot之Excel表格导出 表格导出使用的还是POI,POI的介绍请查看 https://blog.csdn.net/qq_36654629/article/details/901729 ...
- vue数组转Excel表格导出
vue数组转Excel表格导出 安装依赖 npm i xlsx vue组件 <template><div><el-button type="success&qu ...
- linux脚本的数据输出到excel,使用shell实现Excel表格导出功能 | 剑花烟雨江南
在Web项目中,我们经常会遇到Excel表格导出的功能,对于一些数据实时性要求不高的.逻辑相对简单的导出,是否可用通过shell脚本的方式来进行导出,从而降低开发成本呢? 我们都知道,CSV格式可以用 ...
- C# Winfrom Excel表格导出 Aspose.Cells超简单方式
C# Winfrom Excel表格导出 Aspose.Cells超简单方式 首先需要下载 Aspose.Cells.dll,Aspose.Slides.dll,Aspose.Words.dll 这三 ...
- thinkphp excel表格导出
Thinkphp里实现excel表格导出数据,需要在网上下载PHPExcel类包,放在Vendor文件夹下面 地址:http://phpexcel.codeplex.com/releases/view ...
最新文章
- 【Eclipse】 Eclipse 中JPEGEncodeParam 错误波浪线问题
- 手机访问同局域网下的PC中Tomcat中的项目
- ORACLE 普通表转换成分区表(在线重定义)
- Syntax error, parameterized types are only available if source level is 1.5
- 15个IT技术人员必须思考的问题
- flutter 图解_【Flutter 专题】83 图解自定义 ACEWave 波浪 Widget (一)
- chown –r mysql:mysql,mysql部署,操作及异常处理
- 【3D游戏建模】3D建模师的发展前景
- 华为mysql金融版_华为云数据库MySQL金融版公测,打造满足金融场景数据安全性的高端产品...
- jmx监控java进程_用VisualVM远程监控Java进程
- 如何将div与页面的中间(水平/宽度)对齐[重复]
- 递归 非递归 遍历二叉树
- session的保存方式.
- 【学习笔记】模糊控制算法
- matlab检验数据异方差,怀特异方差检验方法在matlab中的实现,以及广义最.....
- 述职答辩提问环节一般可以问些什么_述职提问环节应该提哪些关键问题?
- 本篇和开发无关,查询MFI认证的办法
- 电气潮流运算Matlab怎么编程,基于Matlab的电力系统潮流编程计算
- Java学习笔记类对象多态继承(下)
- 日本美术学校有哪些,日本美术学校排名榜
热门文章
- 「刷新 CTO」微软与 CSDN 的 CTO 转型思想汇
- 鸿蒙将至,安卓安否?
- GitHub 五万星登顶,程序员命令行最全技巧宝典!
- 支付宝小程序升级,一统阿里大生态!
- Go 语言发布 2018 调查报告,最被诟病问题竟然是......
- “边缘计算将吞掉云计算!”
- 软件开发者只要会敲代码就可以了?
- Android 爆发病毒,华米 OV 均受影响;微信宣战百度搜索;抖音遭约谈 | CSDN极客头条...
- linux网卡备份还原,CentOS6.x双网卡采用主-备份策略绑定(bond)
- C语言 后面,c语言++放在前面和后面的区别分析