JavaScript で PDF を生成
- JavaScript で PDF を生成
-
jsPDFライブラリを使用して JavaScript で PDF を生成する -
html2pdfライブラリを使用して JavaScript で PDF を生成する
この記事では、JavaScript ソース コードで PDF を作成するための最適なライブラリと、JavaScript コードでそのライブラリを使用する方法について説明します。
JavaScript で PDF を生成
PDF などの Web ページでファイルのダウンロード オプションをよく見かけます。 開発者は、プログラム コードを使用して PDF ファイルを生成し、この機能をユーザーに提供する必要があります。
JavaScript で複数のライブラリを使用して PDF ファイルを作成できます。 たとえば、多くの Web サイトでは、請求書、チケット、履歴書などのファイルを生成およびダウンロードする機能が提供されています。
これらの Web サイトは、異なるライブラリを使用してこの機能を実行します。 例を使用して、最も一般的に使用される 2つのライブラリについて説明し、学習します。
jsPDF ライブラリを使用して JavaScript で PDF を生成する
JavaScript の場合のみ、PDF を作成するための npm ライブラリ パッケージ jsPDF があります。 このライブラリを使用している間、サーバー側のスクリプトは必要ありません。
動的コンテンツを処理して PDF ファイルを生成できます。 以下に示すように、3 行のコードで PDF ファイルをすばやく簡単に生成できます。
基本的な構文:
var myDoc = new jsPDF(); // object
myDoc.text(10, 10, 'DelftStack Website!'); // content
myDoc.save('dummyFile.pdf'); // saving
オブジェクトを作成し、new キーワードと jsPDF() を使用して変数に格納する必要があります。 次に、コンテンツをオブジェクトの text プロパティを持つ文字列として設定する必要があります。
最後に、save プロパティを使用して PDF ファイルを保存します。
html2pdf ライブラリを使用して JavaScript で PDF を生成する
html2pdf ライブラリを使用すると、JavaScript ソースを使用して Web サイトに埋め込み、Web ページのコンテンツを PDF ドキュメントに変換できます。 PDF ドキュメントは PDF としてダウンロード可能になります。
ライブラリをダウンロードして、使用する前にソースにインポートするだけです。
基本的な構文:
const docElement = document.getElementById('ticket');
html2pdf().from(docElement).save();
上記のように、document.getElementById() によって要素のコンテンツを取得し、html2pdf().from(docElement).save() を使用してコンテンツを PDF に変換し、ファイルをダウンロードできます。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML to PDF conversion</title>
<script src="html2pdf.bundle.min.js"></script>
<script>
function createPDF() {
// get the element of ticket content.
const docElement = document.getElementById('ticket');
// select the element and save as the PDF.
html2pdf().from(docElement).save();
}
</script>
</head>
<body>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript create and download pdf</h3>
<div id="ticket">
<h1>Our Ticket</h1>
<p>Ticket content here</p>
</div>
<button onclick="createPDF()">Download as PDF</button>
</body>
</html>
出力：
上記の HTML ソースの例では、html2pdf ライブラリを既にダウンロードしており、<head> タグでインポートしています。 チケットの div 要素を作成し、id ticket を定義して、HTML の div 要素にダミー コンテンツを提供しました。
次に、そのボタンのクリック イベントにボタン要素 Download as PDF があります。 関数 createPDF() を呼び出しました。 その関数内では、まず、document.getElementById('ticket') を使用して要素を取得し、それを変数に格納します。
最後に、html2pdf ライブラリ メソッド from() と save() を使用しました。 from() メソッドの要素を引数として渡し、save() メソッドを呼び出すだけです。
このライブラリをダウンロードし、上記のソースを HTML の拡張子で保存し、ブラウザで開いて結果を確認します。