如何使用 JavaScript 讀寫文件？

Question

任何人都可以提供一些示例代碼來使用 JavaScript 讀寫文件嗎？

Answer 1

為了完整起見，OP 沒有 state 他希望在瀏覽器中執行此操作（如果他是，如前所述，通常是不可能的）

但是 javascript 本身確實允許這樣做； 它可以通過服務器端 javascript 來完成。

請參閱 Javascript 文件 class 的此文檔

編輯：該鏈接指向現在已由 Oracle 移動的 Sun 文檔。

To keep up with the times here's the node.js documentation for the FileSystem class: http://nodejs.org/docs/latest/api/fs.html

編輯（2） ：您現在可以使用 HTML5 在客戶端讀取文件： http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

沒有。瀏覽器端 javascript 沒有權限寫入客戶端計算機，無需禁用許多安全選項

Answer 3

未來已來，提案更接近完成。 不再有 ActiveX 或 flash 或 java：現在我們可以使用：

• 文件系統 API

• 本機拖放文件訪問

您可以使用拖放將文件放入瀏覽器，或使用簡單的上傳控件。 用戶選擇文件后，您可以使用 Javascript 閱讀它： http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 4

這是 Mozilla 提案

http://www-archive.mozilla.org/js/js-file-object.html

這是通過 spidermonkey 和 adobe 的擴展腳本中的編譯開關實現的。 此外（我認為）您在 firefox 擴展中獲得文件 object。

rhino 有一個（相當粗略的）readFile function https://developer.mozilla.org/en/Rhino_Shell

對於 rhino 中更復雜的文件操作，可以使用 java.io.File 方法。

但是，您不會在瀏覽器中獲得任何這些東西。 對於瀏覽器中的類似功能，您可以使用來自 HTML5、客戶端持久性、cookies 和 ZA408AA7012725AEAB41 存儲對象的 SQL 數據庫函數。

Answer 5

這個 Javascript function 向通過瀏覽器運行它的用戶提供了一個完整的“另存為”對話框。 用戶按 OK 並保存文件。

編輯：以下代碼僅適用於 IE 瀏覽器，因為 Firefox 和 Chrome 已將此代碼視為安全問題並阻止其工作。

// content is the data you'll write to file<br/>
// filename is the filename<br/>
// what I did is use iFrame as a buffer, fill it up with text
function save_content_to_file(content, filename)
{
    var dlg = false;
    with(document){
     ir=createElement('iframe');
     ir.id='ifr';
     ir.location='about.blank';
     ir.style.display='none';
     body.appendChild(ir);
      with(getElementById('ifr').contentWindow.document){
           open("text/plain", "replace");
           charset = "utf-8";
           write(content);
           close();
           document.charset = "utf-8";
           dlg = execCommand('SaveAs', false, filename+'.txt');
       }
       body.removeChild(ir);
     }
    return dlg;
}

調用 function：

save_content_to_file("Hello", "C:\\test");

Answer 6

如果您使用 JScript（Microsoft 的 Javascript）使用 WSH（不在瀏覽器中！）執行本地腳本，您可以使用Scripting.FileSystemObject來訪問文件系統。

我認為如果您關閉許多安全設置，您可以在 IE 中訪問相同的 object，但這將是一個非常非常糟糕的主意。

MSDN在這里

Answer 7

目前，可以使用File 、 FileWriter和FileSystem API 從瀏覽器選項卡/窗口的上下文中寫入和讀取文件，盡管它們的使用有一些注意事項（請參閱此答案的尾部）。

但要回答你的問題：

使用烘焙食品*

寫入文件：

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

讀取文件：

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

使用原始 File、FileWriter 和 FileSystem API

寫入文件：

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

讀取文件：

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

正是你要求的對嗎？ 也許，也許不是。 后兩個 API：

• 目前僅在基於 Chromium 的瀏覽器（Chrome 和 Opera）中實現
• 已脫離 W3C 標准軌道，目前是專有 API
• 將來可能會從實施瀏覽器中刪除
• 將文件的創建限制在磁盤上的沙箱（文件在其之外不會產生影響的位置）

此外，文件系統規范沒有定義目錄結構在磁盤上的顯示方式。 例如，在基於 Chromium 的瀏覽器中，沙箱有一個虛擬文件系統（一個目錄結構，它不一定以與從瀏覽器中訪問時相同的形式存在於磁盤上），其中使用放置 API。

因此，盡管您可以使用 API 將文件寫入系統，但在沒有 API（好吧，沒有 FileSystem API）的情況下定位文件可能不是一件容易的事。

如果您可以處理這些問題/限制，那么這些 API 幾乎是完成您所要求的事情的唯一本地方式。

如果您對非本地解決方案持開放態度，Silverlight 還允許通過IsolatedStorage從選項卡/窗口競賽中進行文件 i/o。 但是，需要托管代碼才能使用此功能； 需要編寫此類代碼的解決方案超出了此問題的 scope 范圍。

當然，使用補充托管代碼的解決方案，只留下 Javascript 來編寫，完全在這個問題的 scope 之內；）：

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

* BakedGoods 是一個 Javascript 庫，它建立了一個統一的接口，可用於在所有本地和一些非本地存儲設施中進行常見的存儲操作。 它是由這個人在這里維護的：）。

Answer 8

對於 Firefox：

var file = Components.classes["@mozilla.org/file/local;1"].
       createInstance(Components.interfaces.nsILocalFile);
file.initWithPath("/home");

請參閱https://developer.mozilla.org/en-US/docs/Code_snippets/File_I_O

對於其他人，請查看TiddlyWiki應用程序以了解它是如何做到的。

Answer 9

在瀏覽器的上下文中，Javascript 可以讀取用戶指定的文件。 有關使用文件 API 讀取文件的詳細信息，請參閱Eric Bidelman 的博客。 但是，基於瀏覽器的Javascript不可能在不禁用某些安全設置的情況下寫入本地計算機的文件系統，因為任何網站隨意更改本地文件系統都被視為安全威脅。

話雖如此，有一些方法可以解決它，具體取決於您要執行的操作：

1. 如果是自己的站點，可以在web頁面中嵌入一個Java小程序。 但是，訪問者必須在本地機器上安裝 Java 並且會收到有關安全風險的警報。 訪問者必須允許加載小程序。 Java Applet 就像一個可執行軟件，可以完全訪問本地計算機。

2. Chrome 支持的文件系統是本地文件系統的沙盒部分。 有關詳細信息，請參閱此頁面。 這為您提供了在本地臨時保存東西的可能。 但是，其他瀏覽器不支持此功能。

3. 如果不局限於瀏覽器，Node.js 有完整的文件系統接口。 有關其文件系統文檔，請參見此處。 請注意，Node.js 不僅可以在服務器上運行，還可以在任何客戶端計算機上運行，包括 windows。 javascript 測試運行器 Karma 基於 Node.js。 如果您只是想在本地計算機上的 javascript 中編程，這是一個選項。

Answer 10

創建文件嘗試

function makefile(){
  var fso;
  var thefile;

    fso = new ActiveXObject("Scripting.FileSystemObject");
    thefile=fso.CreateTextFile("C:\\tmp\\MyFile.txt",true);

    thefile.close()
    }

Create your directory in the C drive because windows has security against writing from web eg create folder named "tmp" in C drive.

Answer 11

您將不得不求助於 Flash、Java 或 Silverlight。 對於 Silverlight，您將看到獨立存儲。 這將使您在用戶磁盤上自己的操場上寫入文件。 但它不會讓你在操場外寫作。

Answer 12

從 ReactJS 測試中，以下代碼成功寫入文件：

import writeJsonFile from 'write-json-file';

const ans = 42;
writeJsonFile('answer.txt', ans);

const json = {"answer": ans};
writeJsonFile('answer_json.txt', json);

該文件被寫入包含測試的目錄，因此寫入實際的 JSON 文件“*.json”會創建一個循環！

Answer 13

您不能以任何跨瀏覽器的方式執行此操作。 IE 確實有一些方法可以使“受信任的”應用程序使用 ActiveX 對象來讀/寫文件，但不幸的是它就是這樣。

如果您希望保存用戶信息，您很可能需要使用 cookies。

Answer 14

為想要從 javascript 下載包含特定內容的文件的人編寫此答案。 我也在為同樣的事情而苦苦掙扎。

const data = {name: 'Ronn', age: 27};              //sample json
const a = document.createElement('a');
const blob = new Blob([JSON.stringify(data)]);
a.href = URL.createObjectURL(blob);
a.download = 'sample-profile';                     //filename to download
a.click();

在此處查看 Blob 文檔 - Blob MDN

Answer 15

使用 JavaScript 讀寫文件有兩種方式

1. 使用 JavaScript 擴展

2. 使用 web 頁面和 Active X 對象

Answer 16

您不能使用 javascript 在客戶端執行文件 i/o，因為這會帶來安全風險。 您必須讓他們下載並運行 exe，或者如果文件在您的服務器上，請使用 AJAX 和服務器端語言（例如 PHP）在服務器端執行 i/o

Answer 17

這是 chrome v52+ 的編寫解決方案（用戶仍然需要 select 目標 doe...）
來源： StreamSaver.js

<!-- load StreamSaver.js before streams polyfill to detect support -->
<script src="StreamSaver.js"></script>
<script src="https://wzrd.in/standalone/web-streams-polyfill@latest"></script>

const writeStream = streamSaver.createWriteStream('filename.txt')
const encoder = new TextEncoder
let data = 'a'.repeat(1024)
let uint8array = encoder.encode(data + "\n\n")

writeStream.write(uint8array) // must be uInt8array
writeStream.close()

最適合編寫在客戶端生成的大數據。
否則我建議使用FileSaver.js來保存 Blob/Files