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

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. 浅谈JS函数防抖及应用场景

    [前言] 在工作中,我们可能碰到这样的问题: 用户在搜索的时候,在不停敲字,如果每敲一个字我们就要调一次接口,接口调用太频繁,给卡住了. 用户在阅读文章的时候,我们需要监听用户滚动到了哪个标题,但是每 ...

  2. 检索式chatbot:

    小夕从7月份开始收到第一场面试邀请,到9月初基本结束了校招(面够了面够了T_T),深深的意识到今年的对话系统/chatbot方向是真的超级火呀.从微软主打情感计算的小冰,到百度主打智能家庭(与车联网? ...

  3. Go micro 入门

    路由跳转 官方文档 本质上是选择不同的方式将HTTP信息合理的转发至后端处理,而不同的方式相当于不同请求的接收器,接收后再将其转发至不同的后端服务,完成整个请求的调用. micro 将请求选择不同的方 ...

  4. 安卓和IOS、微信 公用一个二维码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Luogu P4068 [SDOI2016]数字配对

    反正现在做题那么少就争取做一题写一题博客吧 看到题目发现数字种类不多,而且结合价值的要求可以容易地想到使用费用流 但是我们如果朴素地建图就会遇到一个问题,若\(i,j\)符合要求,那么给\(i,j\) ...

  6. MongoDB创建数据库和删除数据库05-14学习笔记

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写,是一个基于分布式文件存储的开源数据库系统.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关 ...

  7. Autoware 1.12 安装/DEMO

    前言 昨天试了一下新版本,发现完全按照官网安装会提示一些问题,所以留下记录. PS,我选择从源码安装Autoware 1.12 配置列表: 系统:Ubuntu 18.04 ROS:Melodic CU ...

  8. Kubernetes Job与CronJob(离线业务)

    Kubernetes Job与CronJob(离线业务) Job Job分为普通任务(Job)  一次性执行 应用场景:离线数据处理,视频解码等业务 官方文档:https://kubernetes.i ...

  9. Spring Cloud Hystrix Dashboard熔断器-Turbine集群监控(六)

    序言 上一篇说啦hystrix的使用方法与配置还有工作流程及为何存在,我去,上一篇这么屌,去看看吧,没这么屌的话,我贴的有官方文档,好好仔细看看 hystrix除啦基本的熔断器功能之外,还可以对接口的 ...

  10. 【git】git命令集合

    [在包含.git目录所在的项目根目录下,打开git Bash] 参考地址:https://www.cnblogs.com/sxdcgaq8080/p/11655170.html =========== ...