项目当中有用到文件的导出功能,以此来总结

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导出文件下载的更多相关文章

  1. vue+springboot文件下载

    //vue element-ui <el-button size="medium" type="primary" @click="downloa ...

  2. vue 导出xlsx表功能

    详细步骤: 1.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 两个命令行包含三个依赖. 2.项目中src下 ...

  3. Vue导出json数据到Excel表格

    一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...

  4. VUE 导出Excel(iframe)

    1. 概述 1.1 说明 在开发过程中,有时候需要导出某数据表格(excel)以便客户使用,使用iframe对返回二进制文件进行下载处理.记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 ...

  5. vue进行文件下载

    本文为博主原创,未经允许不得转载: 总结一下,最近在vue中实现一个文件下载的功能,用了vue中ajax的方式请求下载接口, 但是返回报错,在网上查询之后,找到用ajax请求下载文件报错的原因:aja ...

  6. vue 导出excel表格

    对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...

  7. 【vue开发】vue导出Excel表格教程&demo

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...

  8. 个人推荐的两款vue导出EXCEL插件

    个人认为前端VUE项目中导出EXCEL比较好的两种方法,均不是我个人原创,我只是收录简单说明,原创地址在下面. 下面推荐两种方法,个人推荐第一种,第二种不做详细讲解,因为作者已经写过博客了,你们可以点 ...

  9. vue导出数据excel

    下载两个依赖 npm install file-save xlsx 创建两个文件 Blob.js与Export2Excel.js 参考地址:文件地址 在Export2Excel.js中修改引入地址,注 ...

随机推荐

  1. base46+url编码

    base64解密+unquote url编码 html = ''' JTdCJTIyc3RvcmUlMjIlM0ElN0IlMjJnYW1lTGlicmFyeSUyMiUzQSU3QiUyMmRpc2 ...

  2. python如何实现元素等待

    一.为什么要元素等待? 在UI自动化过程中,元素的出现受网络环境.设备性能等多种元素影响.因此,元素加载和脚本运行到该元素的时间不一致,会报错:元素无法定位. 简单举下例子:实际UI自动化测试中,点击 ...

  3. 小程序setData()使用和注意事项

    注意: 直接修改this.data,而不调用this.setData(),是无法改变当前页面的状态的,会导致数据不一致 仅支持可以JSON化的数据 单次设置的数据不能超过1024KB,尽量避免一次设置 ...

  4. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  5. Autoware 培训笔记 No. 4——寻迹

    1. 前言 好多初创公司公布出来的视频明显都是寻迹的效果,不是说寻迹不好,相反可以证明,寻迹是自动技术开始的第一步. 自动驾驶寻迹:一种能够自动按照给定的路线(通常是采用不同颜色或者其他信号标记来引导 ...

  6. LaTex语法

    排版数学公式是TeX系统设计的初衷,它在LaTeX中占有特殊地位,也是LaTeX最为人所称道的功能之一.基于对MathType排版效果的不满意,以及对公式进行检索的需求,我们使用LaTeX输入数学公式 ...

  7. RFC函数的初步使用-同步

    1.由于没有外围系统,采用不同SAP不同client之间进行测试. 首先在A-client搭建需要被调用的RFC函数.在A-client里运行SE37创建函数 在属性页签选择“远程启用的模块” 设定i ...

  8. linq,创建数据库,插入数据,newDB.CreateDatabase();newDB.tb2.InsertOnSubmit(stu); newDB.SubmitChanges();

    using System.Data.Linq;using System.Data.Linq.Mapping; namespace ConsoleApplication1388{ class Progr ...

  9. Socket与WebSocket以及http与https重新总结

    Socket与WebSocket以及http与https重新总结 一.Socket 网络中的Socket是一个抽象的接口 ,而是为了方便使用TCP或UDP而抽象出来的一层 ,可以理解为网络中连接的两端 ...

  10. CentOS 6.9安装MySQL 5.6 (使用yum安装)

    CentOS 6.9安装MySQL 5.6 (使用yum安装) 移除CentOS默认的mysql-libs [root@test01 srv]# whereis mysqlmysql: /usr/li ...