我有以下用于下载文件的 vuex 方法:
downloadFile(context, url) {
return new promise((resolve, reject) => {
const method = "GET";
axios
.request({
url: url,
method,
responseType: "blob"
})
.then(response => {
let fileURL = window.URL.createObjectURL(
new Blob([response.data]),
{
type: response.headers["content-type"]
}
);
let fileLink = document.createElement("a");
fileLink.href = fileURL;
let fileName = response.headers["content-disposition"].split(
"filename="
)[1];
fileLink.setAttribute("download", fileName);
document.body.appendChild(fileLink);
fileLink.click();
fileLink.remove();
resolve();
})
.catch(() => {
reject();
});
});
}
我传递 URL 链接(从 Laravel API 获取)
Blockquote
下载文件总是以txt扩展名的问题
Blockquote
最佳答案
您的服务器未发送屏幕截图中的文件扩展名。如果它不在 downloadFile
的 url
参数中,并且您无法修复服务器响应以包含它,则可以从 Content-Type
中推断出它>。您可以创建一个哈希,将每个内容类型链接到扩展。
删除这个:
let fileName = response.headers["content-disposition"].split(
"filename="
)[1];
将其替换为以下内容以捕获扩展名:
const extensions = {
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
'application/fake': 'fake', // Just an example
// etc. Add another line for every Content-Type
}
const contentType = response.headers["Content-Type"];
const extension = extensions[contentType];
const filename = 'file.' + extension;
这将命名每个文件“file.
关于vue.js - axios 下载带有原始正确扩展名的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64941975/