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= ...
随机推荐
- 多版本python import 问题解决方案
原文http://www.tuicool.com/articles/EnE7nm6 多版本Python共存[支持使用pip安装包] 有时特殊需要会要用到高版本的Python, 但是系统自带的版本又是很 ...
- LeetCode 74——搜索二维矩阵
1. 题目 2. 解答 若矩阵为空,比如 [], [[]],此时直接返回 false. 若目标值小于矩阵第一个元素或者大于矩阵最后一个元素,则目标值不在矩阵范围内,直接返回 false. 其他情况下, ...
- const 常量与 define常量的区别
c++中的常量可以使用const定义,也可以使用#define宏定义的方式:二者区别如下: - **区别** 1. const定义的常量有自己的数据类型,编译器可以对其进行严格的类型检查:但是defi ...
- git 创建分支并提交到服务器对应的新分支
1.切换到源分支 git checkout test 2.在源分支的基础上创建新分支 git branch test1 3.提交到远程分支 git pull 会自动提示下面的命令 git pull - ...
- php处理三级分类数据
<?php // 链接数据库 $link = mysqli_connect('localhost','root','root'); if($link == null){ exit; } mysq ...
- LCA(最近公共祖先)——LCA倍增法
一.前人种树 博客:最近公共祖先 LCA 倍增法 博客:浅谈倍增法求LCA 二.沙场练兵 题目:POJ 1330 Nearest Common Ancestors 代码: const int MAXN ...
- C++结构体排序
在C++中,对结构体的排序方式比C语言丰富的多.在C语言中,我们主要是通过qsort进行排序操作(抛开手写排序算法不说). 在C++<algorithm>中,有一个十分强大的排序函数sor ...
- java正则表达式 3 -- 查找
用正则表达式执行查找命令,则需要用正则对象,其规则和执行顺序如下: 指定为字符串的正则表达式必须首先被便以为此类的实例.然后,可将得到的正则对象匹配任意的字符串用于创建Mather对象,执行匹配所涉及 ...
- esayui combotree 只能选择子节点
esayui combotree 只能选择子节点用onBeforeSelect:参数是node,节点被选中之前触发,返回false取消选择动作. 网上找了好多都没一个可用的,要想知道他是子节点还是根节 ...
- 【bzoj2957】楼房重建 分块+二分查找
题目描述 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子.为了简化问题,我们考虑这些事件发生在一个二 ...