前端下载文件
目录
前端下载文件
前端下载文件时，需要注意的坑
通常情况下，获取文件信息和获取这个文件本身是分开的。也就是说，你在页面上看到的文件名是一个接口拿到的，而这个接口中并不包含这个文件的内容，但会包含这个文件的id。之后在根据文件id再用另一个接口拿到这个文件的本体，这个过程没有什么不对，但会存在的问题就是，文件的本体可能并没有这个文件的文件名信息，所以你下载时需要给一个逻辑文件名（自己随便起），或者最简单的保证文件名不变的方法（我能想到的）就是直接传对象，用一个map关联
const fileMap = ref<Map<number, string>>(new Map());
const checkedFile = ref<number[]>([]); // 被选择的文件id
const getFiles = () => {
const res = await 你的获取文件的操作
for (const item of res) {
if (!item) {
return;
}
fileMap.value.set(item.file_id, item.customize_name);
... 其他操作
}
}
getFiles() // 先给map填一遍数据
const downloadFile = () => {
console.log("下载文件", checkedFile.value);
for (const item of checkedFile.value) {
if (!item) return;
const url = getYourDownloadPath() + "/" + item; // 你的获取文件内容的接口
try {
axios
.get(url, {
headers: {
Authorization: `Bearer ${token}`, // 你的token（可选）
},
responseType: "blob", // 设置响应类型为blob，之后要构建下载链接
})
.then((res) => {
// 创建下载链接 start
const blob = new Blob([res.data], { type: res.data.type });
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = downloadUrl;
link.download = fileMap.value?.get(item)!; // map查找对应
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(downloadUrl);
// 创建下载链接 end
});
} catch (e: any) {
message.openMessage(e, TYPE.ERROR);
}
}
};