Vue3 文件下载方法

BasicLab基础架构实验室 2024-10-26 13:03:01 阅读 67

文件下载方式

1. window.location.href 方式

注意:

文件名称为中文时要使用 encodeURI 转码;

下载文件格式为 图片 或 txt 时文件会直接打开;

下文中${ url } 表示接口地址

根据文件名下载:

window.location.href = `${url}/文件名.xlsx`;

文件名有中文:

window.location.href = `${url}/${encodeURI("文件名.xlsx")}`;

根据接口及参数下载(文件名未知):

window.location.href = `${url}?flag=1&id=${id}`;

当参数较多时:

import Qs from 'qs'

let params = {

id:1,

name:'张三'

}

let paramStr = Qs.stringify(params);

window.location.href = `${url}?${paramStr}`

2. 后台返回文件流,模拟a 链接下载

this.$axios.get(${url}/${fileName}`, {

responseType: "blob",

}).then((response) => {

//new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层)

const blob = new Blob([response.data]);

const elink = document.createElement('a');

elink.download = '文件名.xlsx';

elink.style.display = 'none';

elink.href = URL.createObjectURL(blob);

document.body.appendChild(elink);

elink.click();

URL.revokeObjectURL(elink.href); // 释放URL 对象

document.body.removeChild(elink);

}).catch((error) => {

this.$message({

message: error

});

});



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。