javascriptでHTMLをPDF化する

らら
らら

はじめに

PHPとかだとFPDFを使って、ごにょごにょすればできますが・・

javascriptで出来ないかと調べたら・・html2pdf.jsってのがあったのでメモしておきます。

html2pdf.jsとは

html2pdf.js は、html2canvas.jsとjsPDF.jsを使用して、Web ページの要素をクライアント側で印刷可能なPDFに変換するそうです。

下記

https://ekoopmans.github.io/html2pdf.js/

サンプル


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サンプルHTML</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="keywords" content=",,,,">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="google-site-verification" content="">
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function(){
	$(document).on('click','#pdf-btn', function(){
		$('#pdf-btn').hide();
		var filename	= "sample.pdf"		//ダウンロードするPDFファイル名
		var element		= document.body;	//PDF化の範囲
		var	option = {
			margin			: 0,
			filename		: filename,
			pagebreak		: { mode: 'legacy'},
			image			: { 
				type		: 'png', 
				quality		: 1 
			},
			enableLinks		: true,
			html2canvas		: {
				dpi				: 90,
				scale			: 1,
				letterRendering	: true
			},
			jsPDF			: {
				unit			: 'mm', 
				format			: 'a4', 
				orientation		: 'portrait', 
				compress		: true,
				useCORS			: true,
				x				: 0,
				y				: 0,
				scrollX			: 0,
				scrollY			: 0,
				noscript		: false,
				script			: false,
				style			: false
			}
		};
		html2pdf().from(element).set(option).save()
			.then(() => {
				$('#pdf-btn').show();
				// 成功
			})
			.catch((e) => {
				$('#pdf-btn').show();
				// 失敗
			});
	});
});
</script>
</head>
<body id="pagetop">
<button id="pdf-btn" type="button">PDF</button>
<br>
<img src="logo_ccv.png">
<h1>テスト</h1>
<p>もしもしかめよかめさんよ</p>
<p>もしもしかめよかめさんよ</p>
<p>もしもしかめよかめさんよ</p>
<p>もしもしかめよかめさんよ</p>
</body>
</html>
jpegの場合は、imageはこんな感じ 

	image: {
		type: 'jpeg',
		quality: 0.98
	},

jsPDFのオプションは下記から確認

https://github.com/parallax/jsPDF?tab=readme-ov-file

さいごに

最近は、印刷でMicrosoft Print to PDFを選択して印刷しちゃえば。いいんだけどね。

あとhtml2canvasのでテキストは画像化されます。

関連記事