Electronのwebviewはアプリ内ブラウザのような塩梅で使える拡張です。
「戻る」、「進む」といった基本的な動作から、なんと「pdfで印刷」なんて機能まで使えます。
webcontentsという、動作までソックリな別要素があるのですが……
こちらは不勉強な分野なので理解が深まり次第別途記事にします。
実際のところ
main.js
前回と同じなので省略
app.js
今回のキモ。
pdf印刷を実現するには、fsのライブラリが必要です。
別途、「npm install fs」とかやっておきましょう。
onload = function() { var fs = require('fs'); var btn1 = document.getElementById("btn1"); btn1.onclick = function(){ document.bgColor='#000000'; } var webview = document.getElementById("foo"); var indicator = document.querySelector(".indicator"); var loadstart = function() { indicator.innerText = "loading..."; } var loadstop = function() { indicator.innerText = ""; } webview.addEventListener("did-start-loading", loadstart); webview.addEventListener("did-stop-loading", loadstop); var btnBack = document.getElementById("btnBack"); btnBack.onclick = function(){ webview.goBack(); } var btnFwd = document.getElementById("btnFwd"); btnFwd.onclick = function(){ webview.goForward(); } var btnPrnt = document.getElementById("btnPrnt"); btnPrnt.onclick = function(){ webview.printToPDF({}, function(error, data) { if (error) throw error; fs.writeFile("/tmp/print.pdf", data, function(error) { if (err) throw error; console.log("Write PDF successfully."); }) }) } };
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <script src="./app.js"></script> <webview id="foo" src="./1st.html" style="display:inline-block; width:320px; height:240px">...loading</webview> <p>str</p> <form> <input type="button" id="btn1" value="CLICKHERE"> <input type="button" id="btnBack" value="<="> <input type="button" id="btnFwd" value="=>"> <input type="button" id="btnPrnt" value="Print"> </form> </body> </html>
動作
実際動かし、「print」ボタンを押すと"/tmp/print.pdf"として、以下のような簡単なpdfがでてきます。
