JavaScript 创建和保存文件

Harshit Jindal 2021年7月3日

JavaScript

本教程教授如何在 JavaScript 中创建和保存文件。

创建文件并将它们存储在服务器端 NodeJS 上很容易，但在客户端这样做的选择很少。在本教程中，我们编写了一个自定义函数，帮助我们使用数据创建文件，然后保存它。在现代浏览器中，我们有一个名为 msSaveOrOpenBlob 的函数，可以帮助我们保存文件。但是在旧浏览器中，我们首先生成文件的链接，然后通过在锚标记上添加 download 属性来下载它。

function downloadFiles(data, file_name, file_type) {
    var file = new Blob([data], {type: file_type});
    if (window.navigator.msSaveOrOpenBlob) 
        window.navigator.msSaveOrOpenBlob(file, file_name);
    else {
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = file_name;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

在上面的函数中，我们检查浏览器是否支持 msSaveOrOpenBlob，如果找到，我们使用它来保存文件。否则，我们创建一个指向所创建文件的锚标记。我们将下载属性添加到锚标记并将该标记附加到文档的正文。我们使用 JavaScript 点击它，触发下载，并通过这种方式保存文件。然后我们从正文中删除该锚标记并撤销创建的 URL。

Author: Harshit Jindal

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.