Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

クロスプラットフォームなアプリ作成ツール「Electron」で遊ぶ その4:webviewの操作

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がでてきます。
f:id:shuzo_kino:20151216234707p:plain

参考もと