vue 实现文件下载(从后台请求的数据)(包括下载图片、pdf、word等文件格式)
下载最简单的方法就是用a链接实现,然后加一个download属性。但是有一个问题,从后台请求回的接口,对于图片和pdf及svg都不能实现下载功能,也就是download没有起作用。所以下面的方法就是解决这个问题的。<a @click="downloadFile(file.name, file.url)" >下载</a>/* 第一个参数是文件的名字,第二个参数是文件...
·
下载最简单的方法就是用a链接实现,然后加一个download属性。但是有一个问题,从后台请求回的接口,对于图片和pdf及svg都不能实现下载功能,也就是download没有起作用。所以下面的方法就是解决这个问题的。
<a @click="downloadFile(file.name, file.url)" >下载</a>
/* 第一个参数是文件的名字,第二个参数是文件的路径*/
downloadFile(fileName, 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', fileName);
document.body.appendChild(link);
link.click();
}
很简单,其实主要是把url转为[blob]文件格式
如果可以的话也可以直接让后端返回文件流格式的路径,也就不用自己再转换了,直接
<a :href="item.src" :download="item.name"/>
让后端返回[blob]文件格式,需要传递 responseType: ‘blob’
function downloadPost (config){
return new Promise((resolve,reject) => {
axios({
url: config.url,
method: 'post',
data: config.data,
responseType: 'blob'
}).then(res => {
resolve(res)
}).catch(err=>{
reject(err);
});
});
}
参考文章:https://blog.csdn.net/ying940718/article/details/98500667
更多推荐
已为社区贡献32条内容
所有评论(0)