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中修改引入地址,注 ...
随机推荐
- is ==的区别 编码和解码
1.n=0 n1=0 print(n==n1) ==>true == 是比较两边的值 2.a="alex " b="alex" print(a==b)= ...
- ora-01489 字符串连接的结果过长 解决方案
如下代码,使用listagg进行分组拼接时,常常会报 ora-01489 错误,造成该报错的主要原因是:oracle对字符变量的长度限制,正常情况下,oracle定义的varchar2类型变量的长度不 ...
- day79_10_28git使用基础
一.git与svn比较. git就是版本控制器,控制的对象是开发的项目代码. 可以根具时间轴进行回滚代码,改变代码版本. svn的特点就是服务版与用户版分离,当开发这需要进行开发时,需要先在代码仓库中 ...
- ubuntu18.40 rtx2080ti安装显卡驱动/cuda/cudnn/tensorflow-gpu
电脑环境 ubuntu 18.40 gpu rtx2080ti 一.安装显卡驱动 刚开始尝试用手动安装方式安装驱动 下载了驱动程序但是因为没有gcc所以放弃这种方法 后尝试最简单的方式 在 菜单-- ...
- 第九章 基于HTTP的功能追加协议
第九章 基于HTTP的功能追加协议 通过在HTTP的基础上添加新的功能来提高性能和功能. 一.消除HTTP瓶颈的SPDY SPDY(SPeeDY)目的是提高HTTP性能,缩短Web页面的加载时间(50 ...
- nuxtjs踩坑指南
1.nuxt引入问题:Can't resolve 'stylus-loader' 原因在于没有安装stylus,安装即可:npm install stylus stylus-loader --save ...
- Paper | Compression artifacts reduction by a deep convolutional network
目录 1. 故事 2. 方法 3. 实验 这是继SRCNN(超分辨)之后,作者将CNN的战火又烧到了去压缩失真上.我们看看这篇文章有什么至今仍有启发的故事. 贡献: ARCNN. 讨论了low-lev ...
- mysql小知识点汇总---(时间与时间戳的转换, 修改mysql用户名密码, navicate 导入sql文件报错 1153)
1. 时间与时间戳的转换 1.1 时间戳转时间 FROM_UNIXTIME(add_time, '%Y-%m-%d') 1.2 时间转时间戳 UNIX_TIMESTAMP('2015-04-29') ...
- 发布TS类型文件到npm
最近发布了@types/node-observer包到npm,这里记录下发布过程 TS类型文件的包名通常以@types开头,使用npm publish发布以@types开头的包时需要使用付费账号. ...
- Elastic Beats介绍
需要学习的地方:概念,用法,模块使用 Elastic Beats介绍 Elastic Stack传统上由三个主要组件(Elasticsearch,Logstash和Kibana)组成,早已脱离了这种组 ...