html2pdf.jsというライブラリを使用して、HTMLをPDFに変換してダウンロードする方法を紹介します。
上記のライブラリは内部で3つのライブラリ(es6-promise、jsPDF、html2canvas)を使用していて少し重たい(1MB弱ある)のでご注意ください。
使い方
ライブラリの読み込み
実装コード
const element = document.body; // 対象要素を指定
const option = {
margin: 1, // 余白
filename: 'fileName.pdf', // ファイル名
image: { type: 'png', quality: 1 }, // PDFの生成に使用される画像のタイプとクオリティ
html2canvas: { scale: 2, useCORS: true }, // html2canvasで使用される設定を記述。useCORS: trueを設定すると別ドメインの画像を表示できる(サイトによってはできないこともある)
jsPDF: { format: 'a2', orientation: 'portrait' }, // jsPDFで使用される設定を記述
};
html2pdf()
.from(element)
.set(option)
.save()
.then(() => {
// 成功
})
.catch((e) => {
// 失敗
});