JavaScriptでHTMLをPDFに変換してダウンロードする方法

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) => {
        // 失敗
    });

使い方

ライブラリの読み込み

実装コード

参考