前端vue中实现文件下载的几种方法 四种方法, a.download = "重新下命名下载文件名" 比如:download() 方法中定义的
原文链接:https://blog.csdn.net/weixin_46074961/article/details/105677732
第一种 前端创建超链接,通过a标签向后端发送get请求,需要给a标签添加一个download属性
这种写法是创造了一个a标签,把地址写到a标签里再用js调用点击,实现访问文件地址就是下载了
代码如下:
<a
@click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)"
>下载</a>
// 参数分别是:文件的路径 文件的名字 文件的id 文件的类型
- 1
- 2
- 3
- 4
downloadFile(url, fileName, flieId, type) {
let link = document.createElement('a');
link.style.display = 'none';
link.href = baseUrl + '/xxx/xxx/xxx?flieId=' + flieId;
document.body.appendChild(link);
link.click();
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
或者
<a :href='"/user/downloadExcel"' >下载模板</a>
//另一种情况是创建div标签,动态创建a标签:
<div name="downloadfile" "downloadExcel()">下载</div>
function downloadExcel() {
let a = document.createElement('a')
a.href ="/xxx/xxx"
a.click();
}
download(){
let a = document.createElement("a");
a.href = process.env.VUE_APP_XLS_TEMPLATE_PREFIX+"/static/aaa.xls";
a.download = "指定下载文件名字.xls";
a.style.dispaly = "none";
a.click();
a.remove();
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
第二种 通过window.open()下载
window.open就是打开了一个新网页直接在新网页访问文件地址了,只要访问文件地址,就能下载文件。这时候后端返回的是文件流直接渲染,不需要url再打开下载了
downloadFile() {
window.open(
baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc',
'_self'
);
},
- 1
- 2
- 3
- 4
- 5
- 6
第三种方式通过创建iframe的方式:
<el-button size="mini" @click="handleExport(scope.row)">导出</el-button>
//method方法:
handleExport(row) {
var elemIF = document.createElement('iframe')
elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
'&category=' + row.category
elemIF.style.display = 'none'
document.body.appendChild(elemIF)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
第四种:以文件流的形式,会对后端发post请求,使用blob格式,这种写法对于图片和pdf及svg能实现下载功能
<a @click="downloadFile(file.name, file.url)" >下载</a>
/* 第一个参数是文件的名字,第二个参数是文件的路径*/
downloadFile(fileName, fileUrl) {
if (!fileUrl) {
return;
}
let url = window.URL.createObjectURL(new Blob([fileUrl]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
如果后端返回的格式是文件流形式的,就不用转换成Blob形式了。就可以直接简写为:
<a :href="src" download="name"/>
- 1
因为是文件流下载,所以在取后台数据的时候,要多传递一个【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);
});
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
如果后端提供的下载接口是get类型,可以直接使用方法一和二和三,简单又便捷;当然如果想使用方法四也是可以的,不过感觉有点舍近求远了。
如果后端提供的下载接口是post类型,就必须要用方法四了。