Vue 实现文件下载
功能:点击导出按钮,提交请求,下载excel文件;第一步:跟后端确认交付的接口的response header设置了response header以及返回了文件流。第二步:修改axios请求的responseType为blob,以post请求为例:axios({method: 'post',url: 'api/user/',data: {f...
·
功能:点击导出按钮,提交请求,下载excel文件;
第一步:跟后端确认交付的接口的response header设置了
response header
以及返回了文件流。
第二步:修改axios请求的responseType为blob,以post请求为例:
axios({
method: 'post',
url: 'api/user/',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
responseType: 'blob'
}).then(response => {
this.download(response)
}).catch((error) => {
})
第三步:请求成功,拿到response后,调用download函数(创建a标签,设置download属性,插入到文档中并click)
methods: {
// 下载文件
download (data) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'excel.xlsx')
document.body.appendChild(link)
link.click()
}
}
vue实现word或pdf文档导出的功能,后端返回一个文档流(下图),然后前端对文档流做处理进行下载,
import axios from 'axios';
axios.get(`url`, { //url: 接口地址
responseType: `arraybuffer` //一定要写
})
.then(res => {
if(res.status == 200){
let blob = new Blob([res.data], {
type: `application/msword` //word文档为msword,pdf文档为pdf
});
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
let fname = `我的文档`; //下载文件的名字
link.href = objectUrl;
link.setAttribute("download", fname);
document.body.appendChild(link);
link.click();
}else {
this.$message({
type: "error",
message: "导出失败"
})
}
})
两种方式任选
更多推荐
已为社区贡献19条内容
所有评论(0)