JavaScript（html2pdf）3行でHTMLをPDFに変換する

はじめに

今回はJavaScriptのライブラリ「html2pdf」を使って、HTMLをPDFに変換してみます。
クライアントで表示中の画面をPDFに変換し、ダウンロードできるようになります。

https://ekoopmans.github.io/html2pdf.js/

DEMO

サンプルコード

document.querySelector("#button").addEventListener("click", () => {
  const content = document.querySelector("#content");
  const filename = "sample.pdf";
  html2pdf(content).save(filename);
});

※5行！？クリックイベントの中身は3行！html2pdfの処理は1行です！！😆

解説

1. scriptタグでhtml2pdfライブラリを読み込みます。
   GitHubからダウンロードしたファイルを指定しても、CDNのURLを指定してもOKです。
2. 画面にダウンロードボタンを配置して、クリックイベントを設定します。
3. クリックイベントでhtml2pdf(｛HTMLの要素｝).save(｛PDFのファイル名｝)を実行します。

補足

• このライブラリは「html2canvas」と「jsPDF」というライブラリが使われており、
  HTMLの要素を一旦画像に変換し、PDFファイルに出力されています。
  そのため、PDFファイル内でテキストを選択したり、検索することができません。
• PDFファイルはhtml2pdfのオプションでマージン、改ページ、画像品質などを調整できます。
  さらにhtml2canvasのオプションを指定してHTMLから画像への変換処理を、
  jsPDFのオプションを指定してPDFファイルを生成する処理を調整できます。

https://html2canvas.hertzen.com/
https://raw.githack.com/MrRio/jsPDF/master/docs/index.html

おわりに

JavaScriptの処理で、ブラウザから簡単にPDFファイルを生成できました。
テキストが全て画像に変換されてしまうのが残念ですが、
一先ずPDFで保管できればOKという用途ではとてもお手軽だと思います！