vue+axios下载文件的实现
HTML代码: <el-button size="medium" @click="download">下载表格</el-button>
js代码:
<script>
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下载文件的实现的更多相关文章
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
- vue element之axios下载文件(后端Python)
axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuff ...
- axios 下载文件
axio请求里必须加 responseType: 'blob' 参数,如下 //下载文件 api.download=function(id) { return request({ url: this ...
- ajax axios 下载文件时如何获取进度条 process
最近项目需要做一个下载文件的进度条,看网上上传文件进度条下载,特分享出来方便大家查阅 <!DOCTYPE html> <html> <head> <m ...
- vue中使用axios下载文件,兼容IE11
一.设置axios返回值为blob 二.使用a标签的down属性下载,如果是IE浏览器,可以使用navigator.msSaveBlob进行下载 // data的数据类型是blob downloadF ...
- axios下载文件乱码问题 无法解压 文件损坏
/* 下载附件 */ downloadFile(fileName) { // window.open(url); var that = this; var url = "PO2116&quo ...
- vue axios post请求下载文件,后台springmvc完整代码
注意请求时要设置responseType,不加会中文乱码,被这个坑困扰了大半天... axios post请求: download(index,row){ var ts = ...
- vue 上传文件 和 下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue 上传文件 和 下载文件 面试的时候被问到过
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
随机推荐
- ACM训练大纲
1. 算法总结及推荐题目 1.1 C++ STL • STL容器: set, map, vector, priority_queue, queue, stack, deque, bitset• STL ...
- 实现AJAX跨域访问方式一
1.添加pom依赖 <dependency> <groupId>com.thetransactioncompany</groupId> <artifactId ...
- incorrect integer value for column 问题解决
最近在用zend框架,然后装了一个项目,发现注册的时候出现 General error: 1366 Incorrect integer value: '' for column 'user_id' a ...
- [剑指Offer] 30.连续子数组的最大和
题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...
- 你试过不用if写代码吗?
我在教新手编程时,喜欢给他们一些小小的挑战,比如:不使用if语句(或者三元运算符.switch语句等)解决一些编程问题.这样做有什么意义吗?事实上,它可以迫使你从不同的角度寻找解决方法,也许可以找到更 ...
- BZOJ 1030 文本生成器 | 在AC自动机上跑DP
题目: http://www.lydsy.com/JudgeOnline/problem.php?id=1030 题解: 鸽 #include<cstdio> #include<al ...
- [Leetcode] Symmetric tree 对称二叉树
Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...
- 【BZOJ 2324】[ZJOI2011]营救皮卡丘 费用流
本人实行诱骗拐卖(利用自然分层与实际意义),正解拼接补充(充分利用最大流限制(不浪费任何一个走出去的机会而不是不浪费任何一个已有的流)与问题转换) #include <cstdio> #i ...
- SCOI2008奖励关 [状压dp]
题目描述 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之前做出选择,且现在决定不吃的宝物以后也不能再 ...
- 原生toolbar基本使用教程
1.先写布局文件 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" app:title=" ...