Question

我想知道我是否可以通过HTML5 / JS写入文件？在broswer ...

Answer 1

假设您的最终目标是让用户将文件保存到他们将找到的位置，就像右键单击链接并选择“另存为...”一样，这些API还没有广泛的浏览器覆盖范围，可能是出于安全考虑。

然而，您可以做什么 - 无论API与否 - 通过指向data: uri的链接来加密它，download属性指定您建议的文件名。例如：

<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;">Save</a>

点击后，至少在Chrome中，这会将包含文本mostly harmless（和尾随换行符）的文件保存为下载目录中的earth.txt。要从javascript设置文件内容，请先调用此函数：

function setSaveFile(contents, file_name, mime_type) {
  var a = document.getElementById('save');
  mime_type = mime_type || 'application/octet-stream'; // text/html, image/png, et c
  if (file_name) a.setAttribute('download', file_name);
  a.href = 'data:'+ mime_type +';base64,'+ btoa(contents || '');
}

Answer 2

是的，使用新的FileWriter API。

http://www.w3.org/TR/file-writer-api/

您可以在此处查看当前的浏览器支持：http://caniuse.com/#feat=filesystem

Answer 3

是的，可以阅读＆amp;使用HTML5 + JS编写文件。

链接让您入门 - Exploring FileSystem API

我还在SpeckyBoy上写了一篇关于你可能会觉得有用的同一主题的文章 - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

Answer 4

据我所知，您无法从HTML5写入文件，因为让网页访问用户的文件会带来安全风险。

如果你只是需要存储一些数据，以便你的页面可以在以后访问它，HTML5确实有一些叫做Web Storage的东西可以做到。

或者您可以将数据存储在Cookie中（如果它非常小）或存储在服务器上。

Answer 5

另一种可能性是考虑在Windows平台中创建类似ClickOnce应用程序的内容。这将提供一个可下载的可执行文件的链接，该可执行文件将在用户的操作系统中运行，但可以进行基于Web的回调以发送和检索数据。 ClickOnce应用程序可以嵌入浏览器控件，因此您将拥有一个与Web兼容的应用程序，可以直接与用户的存储对话。

Answer 6

这个问题的答案取决于你对以下问题的回答：

您是否认为目前仅在基于Chromium的浏览器（Chrome＆amp; Opera）中支持此类功能？
您是否可以利用现在的专有API来利用这种能力？
你是否可以在将来删除所述API？
您是否可以将使用所述API创建的文件缩小到磁盘上的沙箱（文件无法生效的位置）？

如果您回答＆＃34;是＆＃34;对于以上所有，然后是的，使用FileWriter和FileSystem API，您可以使用Javascript从浏览器选项卡/窗口的上下文中编写文件。

以下是一个简单的示例，说明如何串联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);

使用BakedGoods *，一个Javascript库，建立一个可用于在所有本机（包括FileSystem）和一些非本机存储设施中执行常见存储操作的统一接口，以上是通过此完成的：

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

FileSystem规范没有定义如何在磁盘上显示目录结构的指南。例如，在基于Chromium的浏览器中，沙箱有一个虚拟文件系统（一种目录结构，它不一定存在于磁盘上，其形式与从浏览器中访问时相同），其中放置使用API创建的目录和文件。

因此，虽然您可以使用API将文件写入系统，但在没有API的情况下查找文件（好吧，没有FileSystem API）可能是一件非常重要的事情。

* BakedGoods由这个人维持在这里：）

我可以用HTML5 / JS编写文件吗？

6 个答案: