如何在不使用伺服器的情況下在瀏覽器中保存使用 JavaScript 建立的檔案？

使用HTML5/JavaScript 建立和儲存檔案

在Web 瀏覽器中建立和儲存檔案是一項常見任務，尤其是在處理動態文件時內容。雖然可以讓伺服器參與此過程，但如果伺服器的角色很小，則效率可能會很低。這個問題探討了使用純 JavaScript 來促進在網頁瀏覽器中保存檔案而不涉及伺服器的可能性。

挑戰：在JavaScript 中儲存檔案

使用者有開發了一個腳本，可將Collada 檔案（一種詳細的3D 模型格式）解析為更易於管理的JSON 格式。解析後的檔案儲存在記憶體中，使用者希望提供一種方式讓使用者在不涉及伺服器的情況下下載轉換後的檔案。

解決方案：HTML5 Blob 和下載屬性

解決方案在於 HTML5 Blob 和 Download 屬性。 Blob 物件允許我們在記憶體中建立類似檔案的對象，而 標籤上的 Download 屬性允許我們指定檔案名稱並啟動下載。

以下是示範流程的程式碼片段:

function download(filename, text) {
    var blob = new Blob([text], {type: 'text/plain'});
    var pom = document.createElement('a');
    pom.setAttribute('href', URL.createObjectURL(blob));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

用法：

要使用下載功能，只需使用所需的檔案名和要保存的文字來調用它即可。例如：

download('test.txt', 'Hello world!');

這將在用戶電腦上建立一個名為「test.txt」的文件，其中包含文字「Hello world!」

相容性：

下載功能適用於支援Blob 和Download 屬性的現代瀏覽器。其中包括：

• Chrome
• Firefox
• Safari
• Edge
• Operpera>

以上是如何在不使用伺服器的情況下在瀏覽器中保存使用 JavaScript 建立的檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！