使用 JavaScript 创建和下载文本文件

201 阅读1分钟

开始

我有几个项目需要使用 JavaScript 创建和下载文本/JSON 文件。

我使用以下函数使用 JavaScript 创建和下载各种类型的文件。

function saveTextAsFile(textToWrite, fileNameToSaveAs, fileType) {
    let textFileAsBlob = new Blob([textToWrite], { type: fileType });
    let downloadLink = document.createElement('a');
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = 'Download File';

    if (window.webkitURL != null) {
        downloadLink.href = window.webkitURL.createObjectURL(
            textFileAsBlob
        );
    } else {
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
} 

功能非常简单。它以写入的文本、要保存的文件名和文件类型作为参数。然后,它使用给定的文本和文件类型创建一个新的 Blob 对象。之后,它创建一个新的 a 元素并将 download 属性设置为给定的文件名。

然后,它检查 webkitURL 对象是否在 window 对象中可用。如果是,它将使用 createObjectURL() 方法为 Blob 对象创建一个URL。否则,它使用 URL.createObjectURL() 方法为 Blob 对象创建一个URL。

然后,它将 a 元素的 href 属性设置为上面创建的 URL。之后,它将 a 元素附加到 body 元素并单击它。

所以,如果你想使用 JavaScript 创建和下载文本文件,你可以使用上面的函数。例如,如果你想创建和下载一个名称为 hello.txt 、内容为 Hello World! 的文本文件,你可以这样做。

saveTextAsFile('Hello World!', 'hello.txt', 'text/plain');

同样,如果你想创建并下载一个名称为 hello.json 、内容为 {"hello": "world"} 的 JSON 文件,你可以这样做。

saveTextAsFile('{"hello": "world"}', 'hello.json', 'application/json');

我为此创建了一个 Demo