JavaScript で HTML を PDF に変換する
Web アプリケーションから大量のデータをダウンロードする場合は、PDF ファイル形式が便利です。これにより、ユーザーは動的な素材をファイルとしてダウンロードしてオフラインで使用できます。HTML 素材は PDF ドキュメントに変換され、PDF へのエクスポート機能を使用して PDF ファイルとしてダウンロードされます。サーバーサイドスクリプトは、動的 Web アプリケーションで HTML を PDF に変換します。
このチュートリアルでは、JavaScript を使用してこのような変換を実行します。
jsPDF ライブラリを使用して HTML を PDF に変換する
この方法では、jsPDF ライブラリを使用して HTML を PDF に変換します。これは、使用するのに最適なライブラリの 1つです。jsPDF ライブラリは、PDF 生成をカスタマイズするためのいくつかのテクニックとオプションを提供します。
以下のコードを確認してください。
- HTML
<!DOCTYPE html>
<html>
<body>
<div>
<p>Convert this text to PDF.</p>
</div>
<div id="hidden-element">This will not be printed</div>
</body>
</html>
- JavaScript
var source = window.document.getElementsByTagName('body')[0];
var specialElementHandlers = {
'#hidden-element': function(element, renderer) {
return true;
}
};
var doc = new jsPDF({orientation: 'landscape'});
doc.setFont('courier');
doc.setFontType('normal');
doc.setFontSize(24);
doc.setTextColor(100);
doc.fromHTML(
elementHTML, 15, 15,
{'width': 170, 'elementHandlers': specialElementHandlers});
orientation プロパティは、用紙の向きを設定します。setFont() および setFontType() オプションは、テキストのフォントとフォントスタイルを設定するために使用されます。setFontSize() および setTextColor() 関数は、テキストのフォントサイズと色を設定するために使用されます。
ウィンドウオブジェクトを使用して HTML を PDF に変換する
このメソッドでは、ウィンドウオブジェクトを作成します。これを使用して、関連するドキュメントを作成し、ファイルに HTML テキストを書き込んで PDF としてエクスポートします。
以下のコードを参照してください。
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#text").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Html to PDF</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(text);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="text">
Convert this text to PDF.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
上記の例では、window.open() 関数は指定された寸法でドキュメントを開き、document.write() メソッドは開いたドキュメントにテキストを書き込むために使用されます。