Electron App webview.printToPDF()“另存为...”对话框

Question

我正在创建一个 Electron 应用程序，它使用 <webview> 元素对 Web 应用程序进行包装。

我希望允许用户通过简单地单击按钮并选择保存 PDF 的位置来创建任何页面的 PDF。

Electron 示例中的代码允许每次都保存在硬编码位置。

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.')
        })
    });
};

这很好用，但每次都会保存在同一个位置，并且不允许用户选择位置或名称。

是否有显示“另存为...”对话框的选项？

Answer 1

我宁愿做服务器端的保存过程（发送IPC命令并从electron的main.js文件执行保存）。

无论如何，为了解决你的问题，我不知道是否有一个官方的“另存为”按钮，但你可以实现一些非常相似的东西：

解决方案 1 -- 使用 Web API：

有一种“另存为”（好吧，从技术上讲，它只是要求您提供一个目录，但您可以真正编辑按钮值..所以您唯一会错过的是这里的文件名）内置webkit，你基本上可以这样做：

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

接下来，给按钮添加一个事件监听器：

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

其中 path 包含所选路径，字符串末尾没有任何斜杠或反斜杠（因此您需要手动添加，例如：const filepath = path + "\\" + filename_and_format;

解决方案 2 -- 使用电子 API。

我没有尝试过这个，但我确信它有效。

基本上，诀窍是使用 electron remote: http://electron.atom.io/docs/api/remote/ 可以在渲染器进程中使用。

remote 模块公开了 dialog gui 相关模块：http://electron.atom.io/docs/api/dialog/

所以你真的可以通过使用 showSaveDialog 来做到这一点：http://electron.atom.io/docs/api/dialog/#dialogshowsavedialogbrowserwindow-options-callback

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