vue 附件下载实现5种方法
发布网友
发布时间：2024-10-13 16:22
共1个回答
热心网友
时间：2024-11-14 05:46
通过创建超链接，使用a标签向后端发送get请求，并为a标签添加download属性。这种方式通过在a标签中写入地址，并用js触发点击，实现访问文件地址即下载文件。
代码示例：
>下载
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();
}
第二种方法：
利用window.open()下载。window.open()打开一个新网页，直接在新网页访问文件地址即可下载。此时后端返回的是文件流，无需再次打开url进行下载。
代码示例：
downloadFile() {
window.open(baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc', '_self');
}
第三种方法：
通过创建iframe方式。创建iframe，设置src属性指向文件下载地址，并将iframe设置为不可见。
代码示例：
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);
}
第四种方法：
以文件流形式，通过发送post请求，使用blob格式实现下载功能，适用于图片、pdf及svg文件。
代码示例：
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();
}
第五种方法：
使用ajax原生方法实现下载。通过创建XMLHttpRequest对象，设置请求类型、响应类型等，并在请求成功后生成下载链接。
代码示例：
newFileNameClick(url,name) {
var xReq = new XMLHttpRequest();
xReq.open('GET', url, true);
xReq.responseType = 'blob';
xReq.onload = function () {
var url = window.URL.createObjectURL(xReq.response);
var a = document.createElement('a');
a.href = url;
a.download = name;
a.click();
a.remove();
};
xReq.send();
}
