vue导出文件下载
项目当中有用到文件的导出功能,以此来总结
request({
/*url: this.exportUrl,*/
url: `************`,
method: "GET",
responseType: "blob"
}).then(res => {
console.log(res);
var blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
if (window.navigator.msSaveBlob) { //没有此判断的话,ie11下的导出没有效果
window.navigator.msSaveBlob(blob, unescape(res.headers.filename.replace(/\\u/g, '%u')));
} else {
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = unescape(res.headers.filename.replace(/\\u/g, '%u')); //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}
})
注:有的是自己已经做了ie11下的promise的处理,有的人可能没有做ie11下的promise通用,promise在ie下报错的小伙伴请npm安装下
npm install @babel/polyfill
vue导出文件下载的更多相关文章
- vue+springboot文件下载
//vue element-ui <el-button size="medium" type="primary" @click="downloa ...
- vue 导出xlsx表功能
详细步骤: 1.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 两个命令行包含三个依赖. 2.项目中src下 ...
- Vue导出json数据到Excel表格
一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...
- VUE 导出Excel(iframe)
1. 概述 1.1 说明 在开发过程中,有时候需要导出某数据表格(excel)以便客户使用,使用iframe对返回二进制文件进行下载处理.记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 ...
- vue进行文件下载
本文为博主原创,未经允许不得转载: 总结一下,最近在vue中实现一个文件下载的功能,用了vue中ajax的方式请求下载接口, 但是返回报错,在网上查询之后,找到用ajax请求下载文件报错的原因:aja ...
- vue 导出excel表格
对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...
- 【vue开发】vue导出Excel表格教程&demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- 个人推荐的两款vue导出EXCEL插件
个人认为前端VUE项目中导出EXCEL比较好的两种方法,均不是我个人原创,我只是收录简单说明,原创地址在下面. 下面推荐两种方法,个人推荐第一种,第二种不做详细讲解,因为作者已经写过博客了,你们可以点 ...
- vue导出数据excel
下载两个依赖 npm install file-save xlsx 创建两个文件 Blob.js与Export2Excel.js 参考地址:文件地址 在Export2Excel.js中修改引入地址,注 ...
随机推荐
- [C2P1] Andrew Ng - Machine Learning
About this Course Machine learning is the science of getting computers to act without being explicit ...
- django-订单并发处理--悲观锁和乐观锁
冲突比较少的时候,使用乐观锁. 冲突比较多的时候,使用悲观锁. (1) 悲观锁 select * from df_goods_sku where id=17 for update; 悲观锁获取 ...
- 求解LCA问题的几种方式
求解LCA问题的几种方式 这篇随笔讲解图论中LCA问题(最近公共祖先)的几种求解方式及实现方法.LCA问题属于高级图论,所以希望读者学习过初级图论,知道图的一些基本知识,并懂得深搜算法的实现方式.这样 ...
- 卷积核filter和kernal的区别
在一堆介绍卷积的帖子中,这篇特别之处在于很萌的示例配色,令人眼前一亮,当然直观也是很直观滴,保证了能在昏昏欲睡见周公子前看完. https://towardsdatascience.com/types ...
- 第十周计划周二&周三计划
今天又一次被导师训了,怎么也达不到他的要求,好像我俩不在一条线上.所以现在重新整理一遍思路,继续走. 我认为重点还是主题追踪这一块,但是主题追踪的结果以及显示是个问题,目前还是打算做出来当天最热的前几 ...
- redis数据查看工具
Redis缓存数据库目前已大量的应用,广泛用于存储session信息,权限信息,交易作业等热数据.但是Redis存在的数据可视化不便.Redis的数据查看维护困难.Redis状态监控运维不易等问题.使 ...
- 【BZOJ3876】[AHOI2014&JSOI2014] 支线剧情(无源汇有上下界网络流)
点此看题面 大致题意: 有一张\(DAG\),经过每条边有一定时间,从\(1\)号点出发,随时可以返回\(1\)号点,求经过所有边的最短时间. 无源汇有上下界网络流 这是无源汇有上下界网络流的板子题. ...
- Paper | UNet++: A Nested U-Net Architecture for Medical Image Segmentation
目录 1. 故事 2. UNet++ 3. 实验 3.1 设置 作者的解读,讲得非常好非常推荐:https://zhuanlan.zhihu.com/p/44958351 这篇文章提出的嵌套U-Net ...
- 插头Dp总结
T1 HDU1693:Eat the Trees 题目大意:给出n*m的方格,有些格子不能铺线,其它格子必须铺,可以形成多个闭合回路.问有多少种铺法? 插头Dp板子题,题目要求可以是多个回路, 只需要 ...
- 大话设计模式Python实现- 抽象工厂模式
抽象工厂模式(Abstract Factory Pattern):提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们的类 下面是一个抽象工厂的demo: #!/usr/bin/env pyth ...