JavaScript - html2canvas + jsPDF - pdf へ出力

1.　概要

2.　pdf へ出力

1.　概要

　コンテンツを「.pdf」へ出力してみます。

2.　pdf へ出力

　いささか長くなりますが、およそ下記のようなコンテンツを記述します。
　「略」の箇所は、「konva.js」で、円を描いています。
　その部分の開設は、「JavaScript - Konva.js」をご参照ください。


<script src="https://unpkg.com/konva@9/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<div id="content">
<div id="container" style="border: solid #000000 2px;">
<script>

・・・	略	・・・

</script>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function ()
{
	// UMD形式のため、window.jspdf から jsPDF を取り出す
	const { jsPDF } = window.jspdf;

	document.getElementById('download').addEventListener('click', function ()
	{
		const content = document.getElementById('content');

		if (!content) {
			alert("対象要素が見つかりません。");
			return;
		}

		html2canvas(content).then(canvas => {
			const imgData = canvas.toDataURL('image/png');
			const pdf = new jsPDF('l', 'mm', 'a4');

			const imgWidth = 297; 	// A4 幅 mm
			const pageHeight = 210; // A4 高さ mm
			const imgHeight = canvas.height * imgWidth / canvas.width;
			let heightLeft = imgHeight;
			let position = 0;

			// 1ページ目
			pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
			heightLeft -= pageHeight;

			// 2ページ目以降
			while (heightLeft > 0) {
				position = heightLeft - imgHeight;
				pdf.addPage();
				pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
				heightLeft -= pageHeight;
			}

			// ダウンロード
			pdf.save('sample.pdf');
		});
	});
});
</script>


　実際、この下に書いております
　（ブラウザでコンテンツのソースをご覧いただければ、わかるかと思います「.js」のソースの「URL」のみ異なります）
　下記のように表示されます。

　上記、「PDF 保存」のボタンをクリックすると、「.pdf」のダウンロードが開始されるはずです。