Javascript Electron应用程序webview.printToPDF（）“另存为…”对话框

我正在创建一个Electron应用程序，它使用元素为Web应用程序创建一个包装器

我想让用户创建任何页面的PDF，只需点击一个按钮并选择保存PDF的位置

电子示例中的代码允许每次保存在硬编码位置

document.querySelector("#pdf").onclick = function () {
    webview.printToPDF({}, (error, data) => {
        if (error) throw error
            fs.writeFile('/tmp/print.pdf', data, (error) => {
        if (error) throw error
            console.log('Write PDF successfully.')
        })
    });
};

这可以正常工作，但每次都会保存在同一位置，不允许用户选择位置或名称

---

是否有显示另存为的选项。。。对话框？

我宁愿执行save进程服务器端发送IPC命令并从electron的main.js文件执行save

无论如何，为了解决您的问题，我不知道是否有官方的“另存为”按钮，但您可以实现类似的功能：

解决方案1-使用Web API： 还有一种保存方式，从技术上讲，它只要求您输入一个目录，但您确实可以编辑按钮值。。因此，您唯一会错过的是webkit内置的文件名，您基本上可以执行以下操作：

<input id="savePath" type="file" webkitdirectory />

其中path包含所选路径，字符串末尾没有任何斜杠或反斜杠，因此需要手动添加，例如：const filepath=path+\\\+filename\u和\u格式

解决方案2-使用electron API。 我没试过这个，但我肯定它能用

基本上，诀窍是使用electron remote：它可以在渲染器过程中使用

远程模块公开与gui相关的模块对话框：

因此，您可以使用showSaveDialog真正做到这一点：

---

我使用了解决方案2的一个实现来解决我的问题。@MichaelSmith:是的，如果你不喜欢wekbit方式，这可能是正确的方法。然而，可用的回调非常好；我很高兴这有帮助

let fpHandler = document.getElementByID("savePath");
fpHandler.addEventListener("change", (event) => {
   const path = event.target.files[0].path;
   // save file happens here.
});

const { remote } = require("electron");
remote.dialog.showSaveDialog(remote.getCurrentWindow(), (filename) => {
   console.log("filename is: " + filename);
   // here the save should happen.
});