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. (原创)最小生成树之Prim(普里姆)算法+代码详解,最懂你的讲解

    Prim算法 (哈欠)在创建最小生成树之前,让我们回忆一下什么是最小生成树.最小生成树即在一个待权值的图(即网结构)中用一个七拐八绕的折线串连起所有的点,最小嘛,顾名思义,要权值相加起来最小,你当然可 ...

  2. 第十一次ScrumMeeting会议

    第十一次ScrumMeeting 时间:2017/11/18 4:00-4:30 地点:主203 人员:全体人员 照片: 工作情况 名字 今日计划 明天的工作 遇到的困难 蔡帜 讨论策划详情\确定WB ...

  3. winform 控件半透明设置

    1.backcolor属性为color.FromArgb(100, 220, 220, 220); 2.全透明设置为transparent方法.

  4. fork开源代码后如何基于某个tag建立自己的branch

    应用场景: 在github上fork一个自己想看的开源项目,想基于某个tag来写一些测试demo,然后可以做到版本控制. 方法: //克隆 git clone xxxxx.git //查看tag gi ...

  5. Aspose.Pdf合并图片到PDF文件

    将图片和PDF文件合成为新的PDF文件,可以先将图片转换为PDF文件, 然后合成PDF即可, 将图片转换成PDF文件有如下方法: Aspose.Pdf.Document Aspose.Pdf.Gene ...

  6. C++ 点

    2017/12/23 scoped_ptr类型的指针,只能在一个namespace中使用 1) 怎么查看元素在set中是否存在 1) istringstream类用于执行C++风格的串流的输入操作. ...

  7. KVO 开发详情

    目录 概念 应用KVO的3个步骤 关联属性的KVO 手动管理KVO通知 一.概念 KVO全称是 Key-Value Observing ,是OC的一种消息发送机制.这个机制是指:假设将B对象注册为A对 ...

  8. URL大小写敏感之谜

    URL其实就是我们浏览器地址栏的地址,一般由三部分组成: 协议名称,一般就是http 域名,也就是主机名 资源路径 如链接:http://www.w3school.com.cn/js/js_obj_r ...

  9. 【bzoj2326】[HNOI2011]数学作业 矩阵乘法

    题目描述 题解 矩阵乘法 考虑把相同位数的数放到一起处理: 设有$k$位的数为$[l,r]$,那么枚举从大到小的第$i$个数(即枚举$r-i+1$),考虑其对$Concatenate(l..r)$的贡 ...

  10. Python数据分析(一)pandas数据切片

    1.获取行或列数据 loc——通过行标签索引行数据 iloc——通过行号索引行数据 ix——通过行标签或者行号索引行数据(基于loc和iloc 的混合) 同理,索引列数据也是如此! import pa ...