提问者:小点点

如何保存和打开在我的网站上生成的文件到用户的本地文件系统?


我编写了一个简单的富文本编辑器,希望用户能够将生成的文件保存并打开到他们的本地文件系统中。 我想要模仿的行为可以在https://excalidraw.com/上看到,但我已经看过MDN文件API文档,无法找到如何启动操作系统的保存/打开模式。


共2个答案

匿名用户

这是一种非常简单的方法,涵盖了大多数用途:

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即可。 如果它是在客户端生成的,则可以使用bloburl.CreateObjecturl。 您不能直接保存该文件,但可以将其作为下载链接提供给用户。 这里有一个例子。