我编写了一个简单的富文本编辑器,希望用户能够将生成的文件保存并打开到他们的本地文件系统中。 我想要模仿的行为可以在https://excalidraw.com/上看到,但我已经看过MDN文件API文档,无法找到如何启动操作系统的保存/打开模式。
这是一种非常简单的方法,涵盖了大多数用途:
const link = document.createElement('a');
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); // this will work with other data too, not only text
link.setAttribute('download', filename);. // you can define a file name`
警告:EncodeUricComponent有大小限制,并且可能因浏览器而异。 在这种情况下,您可以用base64编码,将使文件更大,但没有大小限制afaik。
你的问题更多的是关于如何使用操作系统模式吗?
若要打开文件,可以使用类型为file
的输入
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">
要保存文件,这取决于文件是在客户端还是服务器端生成的。 如果它是在服务器端生成的,则只需提供一个URL即可。 如果它是在客户端生成的,则可以使用blob
和url.CreateObjecturl
。 您不能直接保存该文件,但可以将其作为下载链接提供给用户。 这里有一个例子。