blocks|key|134826|text|是的，使用新的FileWriter应用编程接口。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|134827|http://www.w3.org/TR/file-writer-api/|offset|length|134828|您可以在此处查看当前对浏览器的支持：http://caniuse.com/#feat=filesystem|134829|entityMap|0|LINK|mutability|MUTABLE|url|1|http://caniuse.com/#feat=filesystem^0|0|0|11|0|0|I|Z|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]|O|$5|K|L|M|A|$N|P]]]]

Yes, using the new FileWriter API.

<a href="http://www.w3.org/TR/file-writer-api/" rel="noreferrer">http://www.w3.org/TR/file-writer-api/</a>

You can see the current browser support here: <a href="http://caniuse.com/#feat=filesystem" rel="noreferrer">http://caniuse.com/#feat=filesystem</a>

blocks|key|1417065|text|假设您的最终目标是让用户将您的文件保存到他们可以找到的位置，就像右键单击链接并选择“另存为...”时一样，浏览器对这些API的覆盖范围还不广，这可能是出于安全考虑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1417066|但是，您所能做的-无论是不是APIs都是通过链接到一个具有指定建议文件名的download属性的data:+uri来完成的。例如：|offset|length|style|CODE|1417067|<a+id="save"+download="earth.txt"+href="data:text/plain,mostly+harmless&#10;">Save</a>|code-block|syntax|javascript|1417068|当点击时，至少在Chrome中，这将在你的下载目录中保存一个包含文本mostly+harmless+(和一个尾随的换行符)为earth.txt的文件。要从javascript设置文件内容，请先调用此函数：|1417069|function+setSaveFile(contents,+file_name,+mime_type)+{
++var+a+=+document.getElementById('save');
++mime_type+=+mime_type+%7C%7C+'application/octet-stream';+//+text/html,+image/png,+et+c
++if+(file_name)+a.setAttribute('download',+file_name);
++a.href+=+'data:'%2B+mime_type+%2B';base64,'%2B+btoa(contents+%7C%7C+'');
}|1417070|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Data_URI_scheme^0|0|11|8|1C|5|1C|9|0|0|0|Y|F|1Q|9|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]|$D|12|E|13|F|G]]|9|@$D|14|E|15|1|16]]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Assuming your end goal is to let the user save your file somewhere where they will find it, as when right-clicking a link and choosing "Save As...", there isn't wide browser coverage for those APIs yet, likely due to security considerations.

What you can do, however – APIs or not – is cheesing it with a link to a <a href="http://en.wikipedia.org/wiki/Data_URI_scheme" rel="noreferrer"><code>data:</code> uri</a> with a <code>download</code> attribute specifying your suggested filename. For instance:

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

When clicked, at least in Chrome, this will save a file containing the text <code>mostly harmless</code> (and a trailing newline) as <code>earth.txt</code> in your download directory. To set the file contents from javascript instead, call this function first:

<pre><code>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 || '');
}
</code></pre>

blocks|key|1417043|text|是的，可以使用HTML5%2BJS读写文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1417044|帮助您入门的链接-+Exploring+FileSystem+API|offset|length|1417045|不久前，我还为SpeckyBoy写了一篇关于http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/的文章，您可能会发现这个主题很有用|1417046|entityMap|0|LINK|mutability|MUTABLE|url|http://www.html5rocks.com/en/tutorials/file/filesystem/|1|http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/^0|0|A|O|0|0|M|23|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

Yes it is possible to read &amp; write files using HTML5+JS.

Link to get you started - <a href="http://www.html5rocks.com/en/tutorials/file/filesystem/" rel="nofollow">Exploring FileSystem API</a>

I also wrote an article a while back for SpeckyBoy on the same topic that you might find useful - <a href="http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/" rel="nofollow">http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/</a>

blocks|key|2203036|text|据我所知，你不能从HTML5写入文件，因为允许网页访问用户的文件会有安全风险。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2203037|如果你只需要存储一些数据，以便你的页面以后可以访问它，HTML5确实有一种叫做Web+Storage的东西可以做到这一点。|2203038|或者，您可以将数据存储在cookie中(如果数据非常小)或存储在服务器上。|2203039|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

As far as I know, you can't write to files from HTML5, because giving a web page access to the user's files would be a security risk.

If you just need to store some data so your page can access it later, HTML5 does have something called Web Storage which can do that.

Or you could store the data in cookies (if it's very small) or on the server.

blocks|key|3800174|text|另一种可能是考虑在Windows平台上创建类似ClickOnce的应用程序。这将提供一个指向可下载可执行文件的链接，该可下载可执行文件将在用户的操作系统中运行，但可以进行基于web的回调来发送和检索数据。ClickOnce应用程序可以嵌入浏览器控件，因此您将拥有一个与web兼容的应用程序，并且能够直接与用户的存储设备进行对话。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3800175|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Another possibility is to consider creating something like a ClickOnce app in the Windows platform. This would present a link to a downloadable executable that would run in the user's OS but could make web-based callbacks to send and retrieve data. The ClickOnce app could embed a browser control and thus you would have both a web-compatible application with the ability to talk directly to the user's storage.

blocks|key|1417108|text|这个问题的答案取决于您对以下问题的回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1417109|1417110|目前仅在基于铬的浏览器(Chrome和Opera)中支持此类功能，您是否接受这一事实？|unordered-list-item|1417111|是否可以利用目前的专有应用程序接口来利用这种功能？|1417112|您是否接受将来删除该API的可能性？|1417113|将使用该API创建的文件限制到磁盘上的沙箱<代码>E29(该位置之外的文件不会产生任何效果)？<代码>H210<代码>F211|offset|length|style|BOLD|1417114|1417115|如果您对上述所有问题的回答都是“是”，那么使用FileWriter和FileSystem+API，您就可以使用Javascript从浏览器选项卡/窗口的上下文中编写文件。|1417116|下面是一个简单的示例，说明如何串联使用API来实现这一点：|1417117|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);|code-block|syntax|javascript|1417118|BakedGoods*是一个Javascript库，它建立了一个统一的接口，可用于在所有本机(包括FileSystem)和一些非本机存储设施中执行常见的存储操作，通过以下方式实现上述功能：|1417119|bakedGoods.set({
++++data:+[{key:+"testFile",+value:+"Hello+world!",+type:+"text/plain"}],
++++storageTypes:+["fileSystem"],
++++options:+{fileSystem:{storageType:+Window.PERSISTENT}},
++++complete:+function(byStorageTypeStoredItemRangeDataObj,+byStorageTypeErrorObj){}
});|1417120|FileSystem规范没有定义目录结构在磁盘上的显示方式。例如，在基于铬的浏览器中，沙箱具有虚拟文件系统(该目录结构不一定以从浏览器内访问时相同的形式存在于磁盘上)，其中放置了使用API创建的目录和文件。|1417121|因此，尽管您可以使用API将文件写入系统，但在没有API的情况下定位文件(好吧，没有FileSystem+API)可能不是一件容易的事情。|1417122|*BakedGoods是由这里的这个人维护的:)|1417123|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/2012/WD-file-writer-api-20120417/|1|https://www.w3.org/TR/2012/WD-file-system-api-20120417/|2|https://github.com/klawson88/Baked-Goods^0|0|0|0|0|0|J|18|0|0|0|2D|N|A|0|Y|A|1|0|0|T|0|0|0|2M|0|A|2|0|0|0|2V|0|0|1X|0|0|O|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1N|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1O|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|1P|8|@]|9|@]|A|$]]|$1|J|3|K|5|E|7|1Q|8|@$L|1R|M|1S|N|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1U|8|@$L|1V|M|1W|N|O]]|9|@$L|1X|M|1Y|1|1Z]|$L|20|M|21|1|22]]|A|$]]|$1|S|3|T|5|6|7|23|8|@$L|24|M|25|N|O]]|9|@]|A|$]]|$1|U|3|V|5|W|7|26|8|@]|9|@]|A|$X|Y]]|$1|Z|3|10|5|6|7|27|8|@$L|28|M|29|N|O]]|9|@$L|2A|M|2B|1|2C]]|A|$]]|$1|11|3|12|5|W|7|2D|8|@]|9|@]|A|$X|Y]]|$1|13|3|14|5|6|7|2E|8|@$L|2F|M|2G|N|O]]|9|@]|A|$]]|$1|15|3|16|5|6|7|2H|8|@$L|2I|M|2J|N|O]]|9|@]|A|$]]|$1|17|3|18|5|6|7|2K|8|@$L|2L|M|2M|N|O]]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]|1H|$5|1C|1D|1E|A|$1F|1I]]|1J|$5|1C|1D|1E|A|$1F|1K]]]]

The answer to this question depends on your answers to the following questions:

<ul>
<li>Are you fine with the fact that support for such a capability currently exists only in Chromium-based browsers (Chrome &amp; Opera)?</li>
<li>Are you fine with utilizing an as-of-now proprietary API to take advantage of such a capbility?</li>
<li>Are you fine with the possibility of removal of said API in the future?</li>
<li>Are you fine with the constriction of files created with said API to a sandbox (a location outside of which the files can produce no effect) on disk?</li>
</ul>

If you answered "yes" to all of the above, then yes, with the <a href="https://www.w3.org/TR/2012/WD-file-writer-api-20120417/" rel="nofollow">FileWriter</a> and <a href="https://www.w3.org/TR/2012/WD-file-system-api-20120417/" rel="nofollow">FileSystem</a> APIs, you can write files from the context of a browser tab/window using Javascript.

Here is a simple example of how the APIs are used in tandem to do this:

<pre><code>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);
</code></pre>

With <a href="https://github.com/klawson88/Baked-Goods" rel="nofollow">BakedGoods</a>*, a Javascript library that establishes a uniform interface that can be used to conduct common storage operations in all native (including FileSystem), and some non-native storage facilities, the above is accomplished with this:

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

The FileSystem spec defines no guidelines on how directory structures are to appear on disk. In Chromium-based browsers for example, the sandbox has a virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser), within which the directories and files created with the APIs are placed. 

So though you may be able to write files to a system with the APIs, locating the files without the APIs (well, without the FileSystem API) could be a non-trivial affair.

*BakedGoods is maintained by none other than this guy right here :)

I wonder if there is any way I can write to files from HTML5/JS? In the broswer ...

Can I write files with HTML5/JS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我想知道是否有任何方法可以从HTML5/JS写入文件？在浏览器里...

问我能用HTML5/JS写文件吗？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我能用HTML5/JS写文件吗？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我能用HTML5/JS写文件吗？
EN