HTML代码: <el-button size="medium" @click="download">下载表格</el-button>

js代码:

<script>

 import fileDownload from 'js-file-download' //下载js-file-download:npm install js-file-download
methods: {
//下载表格
downloadHttpRequest(u, json, success, fail) {
this.$http({
method: "post",
url: u,
data: json,
headers: {
"Content-type": "application/json",
"Access-Control-Allow-Methods": "*",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": ["x-requested-with", "content-type"]
},
responseType: "blob"
})
.then(res =>
{
let resBlob = res.data // <--- store the blob if it is
let resData = null
let filename = 'attach.txt'; //给下载文件命名
try {
let resText = new Promise((resolve, reject) => {
let reader = new FileReader()
reader.addEventListener('abort', reject)
reader.addEventListener('error', reject)
reader.addEventListener('loadend', () => {
resolve(reader.result)
})
reader.readAsText(resBlob)
})
resData = JSON.parse(resText) // <--- try to parse as json evantually
} catch (err) {
// ignore
}
if (resData) {
if (resData.error) {
// handle error
} else {
// handle data
}
} else {
// handle blob
fileDownload(resBlob, filename)
}
});
},
download() {
let _this = this;
//下载表格接口/passport/getPassportNumberAndCode
_this.downloadHttpRequest(
"/ARPassport/passport/getPassportNumberAndCode",
{
code: 0,
data: _this.$route.query.id
},
function success(res) {
},
function fail(err) {
}
);
}
}
</script>

此方法参考了网上的资料

vue+axios下载文件的实现的更多相关文章

  1. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  2. vue element之axios下载文件(后端Python)

    axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuff ...

  3. axios 下载文件

    axio请求里必须加  responseType: 'blob' 参数,如下 //下载文件 api.download=function(id) { return request({ url: this ...

  4. ajax axios 下载文件时如何获取进度条 process

    最近项目需要做一个下载文件的进度条,看网上上传文件进度条下载,特分享出来方便大家查阅 <!DOCTYPE html> <html> <head>     <m ...

  5. vue中使用axios下载文件,兼容IE11

    一.设置axios返回值为blob 二.使用a标签的down属性下载,如果是IE浏览器,可以使用navigator.msSaveBlob进行下载 // data的数据类型是blob downloadF ...

  6. axios下载文件乱码问题 无法解压 文件损坏

    /* 下载附件 */ downloadFile(fileName) { // window.open(url); var that = this; var url = "PO2116&quo ...

  7. vue axios post请求下载文件,后台springmvc完整代码

     注意请求时要设置responseType,不加会中文乱码,被这个坑困扰了大半天... axios post请求:     download(index,row){         var ts =  ...

  8. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  9. vue 上传文件 和 下载文件 面试的时候被问到过

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

随机推荐

  1. MySQL训练营01

    一.数据库基础知识: 1. 数据库(database):保存有组织的数据的容器(通常是一个或者一组文件) 2. 数据库管理系统(DBMS):数据库软件,外界通过DBMS来创建和操纵数据库,具体是什么, ...

  2. 深度优先搜索(DFS),逃离迷宫

    [原创] 今天来说说深度优先搜索,深度优先是图论中的内容,大意是从某一点出发,沿着一个方向搜索下去,并伴随着有回退的特点,通常用来判断某一解是否存在,不用来寻找最优解:这里来看一个非常有意思的题目: ...

  3. [剑指Offer] 36.两个链表的第一个公共结点

    题目描述 输入两个链表,找出它们的第一个公共结点. [思路]找出两个链表的长度,然后让长的走两个链表的长度差,然后再一起走(因为两个链表用公共的尾部). /* struct ListNode { in ...

  4. Hibernate常用方法之_删除

    1.使用session的delete方法 public void deleteUser(User user){ Session session = null; Transaction transact ...

  5. 创建一个doc对象时候 如果读取了一个已存在的xml对象时候 该xml对象的结构已存在doc中 当改变该doc结构时候 不需要创建新的doc对象

    创建一个doc对象时候 如果读取了一个已存在的xml对象时候 该xml对象的结构已存在doc中 当改变该doc结构时候不 需要创建新的doc对象 直接添加即可 他会同步过去

  6. 遇到问题---java---git下载的maven项目web用tomcat发布时不带子项目

    遇到的情况是用git下载maven项目,然后用mvn eclipse:eclipse命令标记为eclipse项目之后,使用maven插件导入之后用tomcat发布运行,发现maven关联的几个子项目没 ...

  7. [学习笔记]最小割之最小点权覆盖&&最大点权独立集

    最小点权覆盖 给出一个二分图,每个点有一个非负点权 要求选出一些点构成一个覆盖,问点权最小是多少 建模: S到左部点,容量为点权 右部点到T,容量为点权 左部点到右部点的边,容量inf 求最小割即可. ...

  8. 【NOIP模拟赛】Evensgn 的债务 乱搞

    biubiu~~~ 我们发现按照这道题的题意我们把一个个人的前后(欠钱,被欠钱)都缩一下,那么他对其他人没有影响,那么我们就可以依次缩完每个人,而且每个人最后的状态都是要买欠要么被欠,那么我们可以知道 ...

  9. Angular白名单&&Angular拦截器 全局通用

    //angular 白名单全局通用 app.config([ '$compileProvider', function ($compileProvider) { $compileProvider.aH ...

  10. Spring源码解析-事件

    Spring事件的组件 主要是3个组件: 1.ApplicationEvent   事件 2.ApplicationListener 监听器,对事件进行监听 3.ApplicationEventMul ...