如何解决如何使用 Javascript 在不下载的情况下实现保存和另存为?
我正在开发一个类似于图形编辑器的 Web 应用程序,它允许用户插入框、绘制连接等。
在尝试实现保存和另存为功能时,我一直在思考如何在本地保存文件。我尝试使用 a
属性创建 download
标签,然后触发它们的点击事件,但它不允许重命名和选择目录。相反,每次用户点击“保存”时,它都会开始新的下载,从而导致 Downloads 文件夹中出现大量重复项。
function downloadFile(myFileName,myContent) {
var pom = document.createElement('a');
pom.setAttribute('href','data:text/plain;charset=utf-8,' + encodeURIComponent(myContent));
pom.setAttribute('download',myFileName);
pom.click();
}
我希望它如何工作,例如,diagrams.net。使用设备存储创建新文件时,它首先启动“另存为”框,询问名称和目录。之后,当点击保存时,已经创建的文件将被覆盖,而不是下载文件的另一个版本。
我应该怎么做才能使用 Javascript 实现这一目标?
解决方法
diagrams.net 使用全新的实验性 File System Access API 来做到这一点。截至 2021 年 2 月,仅 Chrome Edge 和 Opera 支持此功能
它提供了函数showSaveFilePicker,这里是一个如何使用它的例子。
if("showSaveFilePicker" in window) {
try {
const file = window.showSaveFilePicker({
types: [
{
description: "An XML File",accept: {"text/xml": [".xml"]}
},{
description: "A Text File",accept: {"text/plain": [".txt",".text"]}
}
]
})
} catch (e) {
console.error(e)
}
} else {
alert("Your Browser does not support the FSA API")
// use <a download></a> fallback
}
请注意,我无法添加可执行代码片段,因为沙盒脚本(例如:在 IFrame 中不允许显示文件选择器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。