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= ...
随机推荐
- BZOJ 4184 shallot 线性基+分治
Description 小苗去市场上买了一捆小葱苗,她突然一时兴起,于是她在每颗小葱苗上写上一个数字,然后把小葱叫过来玩游戏. 每个时刻她会给小葱一颗小葱苗或者是从小葱手里拿走一颗小葱苗,并且让小葱从 ...
- Week2 Teamework from Z.XML 软件分析与用户需求调查(四)Bing桌面及助手的现状与发展
一.Bing搜索的相关背景 第一,必应搜索前几年的发展重点在于欧美市场,并且取得了一定的成效:根据 Hitwise 的统计数据,Bing 在 2011年3 月份市场占有率突破了 30% 大关,达到 3 ...
- Linux建立FTP服务器
http://blog.chinaunix.net/uid-20541719-id-1931116.html http://www.cnblogs.com/hnrainll/archive/2011/ ...
- PAT 甲级 1042 Shuffling Machine
https://pintia.cn/problem-sets/994805342720868352/problems/994805442671132672 Shuffling is a procedu ...
- 【bzoj3191】[JLOI2013]卡牌游戏 概率dp
题目描述 n个人围成一圈玩游戏,一开始庄家是1.每次从m张卡片中随机选择1张,从庄家向下数个数为卡片上的数的人,踢出这个人,下一个人作为新的庄家.最后一个人获胜.问每个人获胜的概率. 输入 第一行包括 ...
- Android 架构组件 Room 介绍及使用
关于Room Room是Google官方提供的数据库ORM框架,使用起来非常方便.Room在SQLite上提供了一个抽象层,以便在利用SQLite的全部功能的同时能更加流畅的访问数据库. Room中三 ...
- 微信小程序使用Socket
首先,一个小程序同时只能有一个WebSocket连接,如果当前已经存在一个WebSocket连接,会关闭当前连接,并重新建立一个连接. 其次,如果使用了appID,协议必须是 wss://... 最近 ...
- poj 2104 (主席树写法)
//求第K的的值 1 #include<stdio.h> #include<iostream> #include<algorithm> #include<cs ...
- LwIP - raw/callback API、协议栈API(sequential API)、BSD API(或者说 SOCKET API)
1.使用raw/callback API编程,用户编程的方法是向内核注册各种自定义的回调函数,回调函数是与内核实现交换的唯一方式. recv_udp, accept_function, sent_tc ...
- AngularJs学习——实现列表内容项的增加删除
效果截图: 说明:引入bootstrap.min.css样式库和angular.min.js的静态资源库,实现列表内容的增加和删除操作. AngularJS代码: <script src=&qu ...