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

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. 8. Go语言—指针类型

    一.指针类型介绍 普通类型,变量存的就是值,也叫值类型. 获取变量的地址,用&,比如:var a int ,获取a的地址:&a 指针类型,变量存的是一个地址,这个地址存的才是值(指针存 ...

  2. Feign的介绍与使用(五)

    一.Feign的介绍 Feign是一个声明式 WebService 客户端,使用Feign能够让编写Web Service 客户端更加简单,它的使用方法是定义一个接口,然后在上面添加注解,同时也支持J ...

  3. 工具资源系列之给 windows 虚拟机装个 centos

    前面我们已经介绍了如何在 Windows 宿主机安装 VMware 虚拟机,这节我们将利用安装好的 VMware 软件安装 centos 系统. 前情回顾 由于大多数人使用的 Windows 电脑而工 ...

  4. react细节

    1.在函数式组件中使用 类型和默认值 function App({ name }) { return ( <div> <h1>{name}</h1> </di ...

  5. xcode静态库调试

    [工程1]:静态库工程,用来生成xxx.a [工程2]:项目工程,需要引入静态库xxx.a 工程2引入静态库的方法是将工程1生成的xxx.a和include头文件目录,加入到工程2中. 而如果需要在工 ...

  6. 使用CMD命令部署.NetCore程序到IIS

    dotnet restore cd src\XXXXX md publish dotnet publish -o publish cd publish set siteFilePath=%cd% se ...

  7. JVM垃圾回收GC

    1.堆的分代和区域 (年轻代)Young Generation(eden.s0.s1  space)    Minor GC (老年代)Old Generation (Tenured space)   ...

  8. csp模拟题-201903

    1.小中大(100分) #include<iostream> #include<cstdio> #define maxn 100010 using namespace std; ...

  9. OpenDaylight开发hello-world项目之开发工具安装

    OpenDaylight开发hello-world项目之开发环境搭建 OpenDaylight开发hello-world项目之开发工具安装 OpenDaylight开发hello-world项目之代码 ...

  10. Zuul中聚合Swagger的坑

    每个服务都有自己的接口,通过Swagger来管理接口文档.在服务较多的时候我们希望有一个统一的入口来进行文档的查看,这个时候可以在zuul中进行文档的聚合显示. 下面来看下具体的整合步骤以及采坑记录. ...