今回は、Webシステムで動的な情報を印刷プレビュー画面にて表示させる事があったのでその備忘録としてまとめたいと思います。
目次
――――――――――――――――――――――――――――
① 開発環境
② 実装方法
③ まとめ
――――――――――――――――――――――――――――
①開発環境
※今回の機能は特段、開発環境に依存は無い為、簡潔に記載いたします。
・Laravel
・JQuery
・Bootstrap
②実装方法
・まずはお好みで画像を用意します。
<canvas id="canvas" class="test_image"></canvas>
・次は以下の2つのJavaScriptを読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
・次にボタンとスクリプトを設置します。
【button】
<a id="print" class="btn btn-default"></a>印刷
【javascript】
$('#print').on('click', (e) => {
html2canvas($('#modal_plot .modal-body')[0], {scale: 3}).then(canvas => {
var myImage = canvas.toDataURL("image/png");
printJS(myImage, 'image');
});
});
html2canvas($('#modal_plot .modal-body')[0], {scale: 3}).then(canvas => {
var myImage = canvas.toDataURL("image/png");
printJS(myImage, 'image');
});
});
③まとめ
・今回は、Webシステムで動的な情報を印刷プレビュー画面にて表示させる方法についてまとめてみました。
公開されているJavaScriptのライブラリを使用すると様々なことを実装することができます。
今後も色々と調べていきたいですね。