PDF直接保存ボタンをつくる
えんたま
始めに
HTMLやCSSでWebページ作ったけど、そのページを見た目のままPDF保存するのが難しかったので、その記録を残します。
Google Chromeとかについてる印刷ボタンを使っても良いけど、
それだとデバイスによって見た目が変わる上、PDF保存までに何ステップか必要です。
解決方法をご紹介します。
WebページPDF保存ボタン実装
最低限必要な部分だけ解説していきます。
HTML
まずHTML側のコードはこんな感じ
<div class="" id="btn1">
<p id="getImage" class="" onclick="downloadImage();">結果のPDF保存</p>
</div>ボタンではなく、pで実装しているので、ボタンの形にするスタイルをつける必要がありますが、今回は割愛。
気になる方は、「CSS ボタン」などと検索してみてください。
特に難しいことはしていません。
ボタンの要素にid割り当てたのと、クリックしたときに"downloadImage()"関数を呼び出すようにしています。
html上部で、html2canvasとjspdfの導入を忘れないで！
<script src="../js/html2canvas.min.js"></script>
<script src="../js/jspdf.min.js"></script>CSS
次にCSS側のコードはこんな感じ
.print-off {
display: none;
}
.a4 {
width: 330mm;
height: 210mm;
}簡単に解説
print-offクラスは要素を消すクラスです。
これをhtml内の要素に割り当てると、その要素が消えたように見えます。
これはdisplay: noneで設定しています。
a4クラスは保存時の大きさを設定するクラスです。
人によってwebページを見ている画面の大きさが違うので、これでを使って無理やり、
全てのデバイスで同じ大きさのPDFを保存できるようにします。
JavaScript
最後に最も重要なJavaScriptです。
function downloadImage() {
//要素取得
var htmlBody = document.body;
var btn1 = document.getElementById('btn1');
//大きさ、要素の保存調整
htmlBody.classList.add('a4');
btn1.classList.add('print-off');
//スクリーンショット->PDF保存
html2canvas(document.getElementById('target')).then(function(canvas) {
savePdf(canvas);
});
//PDF保存用に変更した要素を元に戻す。
btn1.classList.remove('print-off');
htmlBody.classList.remove('a4')
}
function savePdf(data) {
var dataURI = data.toDataURL();
var pdf = new jsPDF('l', 'pt', 'a4', false);
var width = pdf.internal.pageSize.width;
var height = pdf.internal.pageSize.height;
pdf.addImage(data, 'JPEG', 0, 0, width, height);
pdf.save('保存名.pdf')
}downloadImage()関数が保存ボタンクリックとともに呼び出される関数です。
上から、何をしているのか見ていきます。
最初の行で、htmlのbody全体を取得しています。
これは、後にhtmlBody.classList.add('a4');にて、無理やり横向きの決まった大きさに変更されています。
また、btn1要素も取得されています。
これにprint-offクラスを振ることで、PDF保存時に表示されなくします。
PDFに保存したくない要素は、全てprint-offクラスを振って消しましょう。
これらは全て、PDF保存ボタンを押した後の処理のため、ユーザーからは見えません。
次にhtml2canvasを使ってスクリーンショットを撮り、それをPDFに貼り付けて保存する処理です。
savePDF()関数がPDF保存をする関数です。
new jsPDFで新規PDFを作っています。
引数に"l"と"a4"を指定していることで、横向き、A4サイズになります。
PDF保存ができたら、PDF保存用に変更した要素を元に戻す処理が必要です。
これをしないと、要素が消えていたり、画面の大きさが合わなかったりと問題が起きます。
classList.removeを使ってしっかり最初に追加したクラスを消しましょう。
これでPDF保存ができました！
終わりに
インターン先の方から、PDF保存ボタンが欲しいと言われて試行錯誤した結果、
html2canvasでスクリーンショットを撮った後、jsPDFで保存する方法が1番簡単だと思い実装しました。
PDF保存前にhtmlの要素を保存用にいじれるというのが非常に便利で面白いと感じました。
良かったら使ってみてください。
