Bootstrap

window.open()前端下载文件乱码

纯前端的情况,没有后端支持。那么文件名乱码的问题可能和浏览器如何处理 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);
        });
}

展开

说明:

  1. 创建 a 标签并设置 download 属性
    使用 a.download 设置文件的下载名称。a.download 可以确保下载时文件名显示为你指定的名称,且不会有乱码(浏览器会处理编码问题)。

  2. 使用 fetch 获取文件内容
    使用 fetch 请求文件,返回的是一个 Blob 对象。Blob 对象代表了一个不可变的原始数据文件。

  3. 生成下载链接
    使用 URL.createObjectURL(blob) 生成一个指向文件内容的临时 URL。

  4. 触发下载
    通过 a.click() 触发下载,浏览器会根据 download 属性下载文件,并使用你设置的文件名。

  5. 清理临时 URL
    调用 URL.revokeObjectURL() 来释放掉临时生成的 URL 资源。

处理中文文件名:

对于中文文件名,现代浏览器(如 Chrome, Firefox)会自动处理文件名的编码,不会导致乱码问题。因此,无需额外的编码操作。

总结:

通过这种方式,你可以避免使用 window.open() 导致的下载文件名乱码问题,并且完全通过前端处理文件下载。

;