HTML ページを PDF 化してダウンロードできるようにする

帳簿やレポートなどを Web ページで表示して、それをダウンロードできるようにしたいことはよくあると思います。

こちらの記事を参考にさせていただきました。

以下のライブラリをインストールする必要があります。

code:zsh

npm install jspdf html2canvas

まずは　HTML 部分を作成します。

こんな感じで作成します。

重要なのはあとで DOM を特定するための id で、内容については自由なので割愛します。

pdf-data の部分が PDF 化されるイメージです。

code:html

<body>

<table>

</table>

</div>

<div>

</div>

</body>

こんな感じで JS を用意します。

取得した HTML を canvas にして、 jsPDF に PNG として食わせます。

この後、 save をすることで、デバイスに保存してくれるようです。

簡単です。

code:js

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';

const makeAndDownloadPdf = () => {

const html = document.getElementById('pdf-data');

if (!html) return;

html2canvas(html).then(capture => {

const imgData = capture.toDataURL('image/png');

const doc = new jsPDF();

const width = doc.internal.pageSize.width;

doc.addImage(imgData, 'PNG', 10, 10, width * 0.9, 0);

doc.save('sample.pdf');

})

}

document.addEventListener('DOMContentLoaded', () => {

const downloadButton = document.getElementById('pdf-download-button');

if (!downloadButton) return;

downloadButton.addEventListener('click', event => {

makeAndDownloadPdf();

});

ボタンを押すと、PDF 化されるまで少し時間がかかるので、実際はローディングなどを出した方が良いかもしれません。

余談ですが、jsPDF の 2 系では、各種依存ライブラリがアップデートされており、 node.js 12 以上でないと依存が解決できないようです。

node.js 12 未満の場合は 1 系を使いのが良さそうです。