如何重命名下载文件

Posted on Wed, 25 Dec 2024 16:15:56 +0800 by LiangMingJian

需求 #

通常情况下，服务器后端存储文件时，会使用唯一 ID 将文件重命名，避免重名文件冲突。此时，如果用户直接下载文件，下载下来的文件名将会是唯一 ID，用户难以识别文件的真实内容。因此，需要在下载文件后，将文件名从唯一 ID 修改为文件原本的名字（这些名字往往存放在服务器数据库中）。

实现 #

将下载的文件读取为文件流 Blob，在保存文件流时进行重命名。

// 下载文件，并获得文件流
function getBlob(url) {
    return new Promise((resolve) => {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(xhr.response);
            }else{
                resolve(0);
            }
        };
        xhr.send();
    })
}

// 重命名并保存文件流
function saveAs(blob, file_name) {
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob)
    link.download = file_name;
    link.target="_blank";
    link.click();
}