纯前端的情况,没有后端支持。那么文件名乱码的问题可能和浏览器如何处理 window.open()
这种方式有关,尤其是文件名包含特殊字符(如中文、空格等)时。
在纯前端的文件下载场景中,我们可以通过创建 a
标签并设置 download
属性来触发文件下载,而不是使用 window.open()
。这样可以直接控制文件的下载名称。
解决方案:
我们可以通过 Blob
对象和 URL.createObjectURL
创建一个文件下载链接,并设置文件的下载名,这样可以避免乱码问题。
完整前端解决方案:
downloadDrawing(row) {
let url = row.url;
let filename = row.name;
console.log("row:", row);
console.log("filename:", filename);
// 创建一个新的 a 标签
const a = document.createElement('a');
// 生成文件链接
fetch(url)
.then(response => response.blob()) // 获取文件内容
.then(blob => {
// 创建临时 URL
const downloadUrl = URL.createObjectURL(blob);
// 设置下载链接和文件名
a.href = downloadUrl;
a.download = filename; // 设置文件下载名
// 触发下载
a.click();
// 清理临时 URL
URL.revokeObjectURL(downloadUrl);
})
.catch(error => {
console.error('Download failed:', error);
});
}
展开
说明:
-
创建
a
标签并设置download
属性:
使用a.download
设置文件的下载名称。a.download
可以确保下载时文件名显示为你指定的名称,且不会有乱码(浏览器会处理编码问题)。 -
使用
fetch
获取文件内容:
使用fetch
请求文件,返回的是一个Blob
对象。Blob
对象代表了一个不可变的原始数据文件。 -
生成下载链接:
使用URL.createObjectURL(blob)
生成一个指向文件内容的临时 URL。 -
触发下载:
通过a.click()
触发下载,浏览器会根据download
属性下载文件,并使用你设置的文件名。 -
清理临时 URL:
调用URL.revokeObjectURL()
来释放掉临时生成的 URL 资源。
处理中文文件名:
对于中文文件名,现代浏览器(如 Chrome, Firefox)会自动处理文件名的编码,不会导致乱码问题。因此,无需额外的编码操作。
总结:
通过这种方式,你可以避免使用 window.open()
导致的下载文件名乱码问题,并且完全通过前端处理文件下载。