Электронное приложение webview.printToPDF() «Сохранить как ...» Dialog

Question

Я создаю приложение Electron, которое использует оболочку для веб-приложения, используя элемент <webview>.

Я хочу, чтобы пользователи могли создавать 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 и выполнить сохранение из файла 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. 
}); 

где путь содержит выбранный путь без косой черты или обратной косой черты в конце строки (так что вам нужно будет добавить это вручную, как: const filepath = path + "\\" + filename_and_format;

Решение 2 - Использование электронного API.

Я не пробовал этот, но я уверен, что он работает.

В принципе, трюк использует электронный пульт дистанционного управления: http://electron.atom.io/docs/api/remote/ который может быть использован в процессе рендеринга.

удаленный модуль предоставляет модуль, связанный диалог 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. 
});