使用数据URI提示用户保存文件

Using data URIs to prompt the user to save files

本文关键字：用户保存文件提示 URI 数据更新时间：2024-01-20

我正在编写一个web应用程序，它允许用户选择PNG文件，向其中写入iTXt块，然后将其保存回本地文件系统。我会使用新的FileWriter API来做到这一点，但目前只有谷歌Chrome添加了对它的支持

由于我的文件在内存中表示为二进制字符串，我使用数据URI提示用户按如下方式保存文件：

window.location.href = "data:application/octet-stream;base64," + btoa(blob);

由于mime类型为application/octet-stream，浏览器会提示用户打开或保存它。但问题是用户不知道它是哪种类型的文件。因此用户必须手动添加文件扩展名。

目前，我会提醒用户需要使用哪个扩展名保存文件。然而，这似乎是一个不雅的解决方案。有没有更好的方法来达到同样的结果？

如果这是HTTP，那么您必须将内容处理设置为附件，即使文件的mime类型已知，也必须保存文件，或者为八位字节流类型的附件设置文件名。不过，这两个标头都不能使用data: URI来模拟，所以我看不出使用这样的URI打开"另存为…"对话框的方法。

其他人问如何打开js变量的保存文件对话框，从那里的答案来看，似乎有现成的解决方案，只要客户端安装了Flash（并且没有被阻止），就可以使用。

因此，也许您可以尝试几种解决方案，从您提到的FileWriter开始，如果不可用，则尝试基于闪存的方法，然后返回到data: URI并显示有关文件扩展名的警告消息。这样，你可能会为每个客户实现最好的结果。