实现electron打开本地文件、文件另存为其他文件夹功能

Posted 2023-04-12

参考技术A 一直在写底层的功能，近期需要开发打开文件和文件另存为的接口提供给UI层使用，于是把踩到的坑总结一下；

源码实现如下：

需要指定文件保存的地址， 注意： 这里使用的是全局的绝对路径，并且是用c://盘符开头的，path.resolve(__dirname, "../../../static/files/")

1. 首先先通过node的底层fs模块exists方法去判断当前路径下是否存在此文件名的文件，如果存在则直接通过electron的shell模块打开，方法名：

shell.openItem(files + '/' + formData.fileRealName);

因为files是带盘符的全局路径，所以拼上文件的后缀名的时候需要加上'/'的符号

2. 如果当前文件夹下并没有保存过此文件，那么需要先将文件写入本地，通过fs模块写入，方法：writeFile

写入成功后直接在回调中在通过shell方法打开文件

实现方式和文件打开有一个区别就是需要去打开另存文件窗口，这个需要通过electron方法去实现：

title就是要弹窗的标题

defaultPath是弹窗的默认文件名，（可以修改）

filters是文件的默认格式，可以自行设置

第二个参数是一个回调参数，通过回调参数可以获取到当前文件路径（带文件名的），拿到此参数就可以进行后面的写入文件操作了，还是一样使用writeFile；

如何使用Javascript实现不下载的保存和另存为？

【中文标题】如何使用Javascript实现不下载的保存和另存为？

【英文标题】：How to implement Save and Save As without download using Javascript?

【发布时间】：2021-05-23 10:54:51

【问题描述】：

我正在开发一个类似于图形编辑器的网络应用程序，它允许用户插入框、绘制连接等。

在尝试实现 Save 和 Save As 功能时，我坚持如何在本地保存文件。我尝试使用download 属性创建a 标签，然后触发他们的点击事件，但它不允许重命名和选择目录。相反，每次用户点击保存时，它都会开始新的下载，从而导致 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。当使用 Device 存储创建新文件时，它首先会启动另存为框，询问名称和目录。之后，当点击保存时，已创建的文件将被覆盖，而不是下载文件的另一个版本。

我应该怎么做才能使用 Javascript 实现这一目标？

【参考方案1】：

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

请注意，我无法添加可执行代码 sn-p，因为沙盒脚本，例如：在 IFrame 中不允许显示文件选择器。