みなさん、こんにちは。どんぶラッコです。
本日は、 jsPDF と html2canvas という2つのライブラリを使ってWebページをPDFで保存できる機能を作ってみましょう！
サンプル
See the Pen jsPDFとhtml2canvasを使ってHTMLページをPDF化する by cha1ra (@cha1ra) on CodePen.
改めて、今回使ったライブラリをご紹介します。
まずは jsPDF 。 PDF化処理を担うライブラリです。
次に html2canvas。HTML要素をcanvas化して画像にしてくれるライブラリです。
ライセンスはどちらも MIT です(2020年11月12日現在)。
コード解説
では実際のコードをみていきましょう。まずはHTMLから。
<div id="capture">
<p>
id <code>capture</code> の中身を画像化してPDFにするサンプル
</p>
<div>
<button id="btn">
PDFとして保存
</button>
</div>
</div>今回は id="capture"の要素内をPDF化する、という設定で記述しているので、captureが付与された <div>タグで囲っています。
続いてJavaScript。
// If you install via npm ...
// import { jsPDF } from 'jspdf'
// import * as html2canvas from 'html2canvas'
const button = document.getElementById('btn')
button.addEventListener('click', (event) => {
const source = document.getElementById('capture')
html2canvas(source).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")
})
})関数化せずにだらだら書いてしまっているので、機能ごとに分解してみていきましょう。
まずはボタンのクリックイベントを取得しています。
const button = document.getElementById('btn')
button.addEventListener('click', (event) => {
// 中略
})これはわかりやすいですね。続いてHTML要素の画像化処理を実施しています。
const button = document.getElementById('btn')
button.addEventListener('click', (event) => {
// ここから追記
const source = document.getElementById('capture')
html2canvas(source).then(capture => {
const imgData = capture.toDataURL('image/png')
// 中略
})
})定数sourceに id="capture"のDOM要素を格納し、それを html2canvas() に食わせています。
html2canvasはPromiseオブジェクトを返すので、そのまま .then でつなげて記載します
続いて、jsPDFの処理です。
const button = document.getElementById('btn')
button.addEventListener('click', (event) => {
const source = document.getElementById('capture')
html2canvas(source).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")
})
})doc.internal.pageSize.width で PDFの横幅を取得しています。そして、doc.addImage()でPDFに画像を貼り付ける処理をしています。
手順を分解すると結構簡単ですよね！
ちなみに、npmやyarnを使ってインストールした場合(モジュールとして読み込みたい場合)、import文の書き方は下記の通りです。
import { jsPDF } from 'jspdf'
import * as html2canvas from 'html2canvas'また、PDFの2ページ目に貼り付けたい場合、doc.addPage()と記載するだけでOKです！
みなさんも試してみてください〜
