JS を使用して HTML ページまたはフォームを PDF ドキュメントに変換する方法

英文 | https://medium.com/coding-beauty/javascript-convert-html-to-pdf-99851d36e1cd

jspdf ライブラリを使用すると、HTML ページまたはフォームを簡単に PDF に変換できます。

例えば：

import { jsPDF } from 'jspdf';


const pdfContentEl = document.getElementById('pdf-content');


const doc = new jsPDF();


await doc.html(pdfContentEl.innerHTML).save('test.pdf');

PDF は、さまざまなプラットフォームやデバイス間で固定レイアウトでドキュメントを表示および共有するために使用される一般的なファイル形式です。

変換を開始するには、コンストラクターを使用して新しい jsPDF オブジェクトを作成します。次に、html() メソッドを呼び出し、PDF に必要なコンテンツを含む要素を渡します。結果に対して、save() を呼び出し、必要な出力 PDF ファイルの名前を渡します。

次のような HTML があるとします。

<div id="pdf-content">
  <h1>Test</h1>
  <p>Here's what we're saving to PDF</p>
</div>
<button id="save-pdf">Save PDF</button>

Web ページには次の出力があります。

「PDF を保存」ボタンをクリックすると、jsPDF は HTML 要素から新しい PDF を作成し、それをファイルとしてブラウザにダウンロードします。

PDFを開いたときに表示された内容は次のとおりです。

jsPDFをインストールする

jsPDF ライブラリの使用を開始するには、次のコマンドを使用して NPM からインストールします。

npm i jspdf

インストールしたら、次のように JavaScript ファイルにインポートできます。

import { jsPDF } from 'jspdf';

このファイルを HTML で動作させるには、私が使用している Parcel のようなモジュールバンドラーを使用できます。

Parcel を使用すると、次のように HTML にスクリプトを含めることができます。

<script type="module" src="index.js"></script>

TypeScript や ES モジュールのインポートなどの最新ツールをスクリプトで使用できます。Parcel のおかげで、それは問題なく機能します。

npm install Parcel を使用して Parcel をインストールした後、 npx Parcel my-file.html を使用して HTML を実行します。

npm install parcel


npx parcel my-file.html

上記のデモで見たように、Parcel は HTML を localhost:1234 で利用できるようにします。

HTML から PDF への変換をカスタマイズする

jsPDF コンストラクターは、PDF 変換プロセスをカスタマイズするためのオプションオブジェクトを受け入れます。

たとえば、[方向] オプションでは、生成される PDF の方向を設定します。

デフォルトでは縦向きですが、横向きに設定することもできます。

PDF の向きをカスタマイズする

const doc = new jsPDF({ orientation: 'landscape' });

PDF の単位と寸法をカスタマイズする

[単位と書式設定] オプションを使用すると、出力ファイル内の各 PDF ページの単位と寸法を設定できます。

const doc = new jsPDF({ orientation: 'l', unit: 'in', format: [4, 2] });

ここでは、2 x 4 インチの横長エクスポートを指定します。

HTML フォームを PDF に変換する

jsPDF は、フォーム入力などのユーザー操作に基づいて外観が動的に変化する HTML 要素も処理できます。

HTML:

<form id="form">
  <input type="email" name="email" id="email" placeholder="Email" />
  <br />
  <input
    type="password"
    name="password"
    id="password"
    placeholder="Password"
  />
  <br /><br />
  <button type="submit">Submit</button>
</form>
<br />
<button id="save-pdf">Save PDF</button>

JavaScript:

import { jsPDF } from 'jspdf';


const doc = new jsPDF();
const savePdf = document.getElementById('save-pdf');
const formEl = document.getElementById('form');
savePdf.addEventListener('click', async () => {
  await doc.html(formEl).save('test.pdf');
});

Web ページでは、2 つのフォーム入力にいくつかのテスト値を入力して、PDF 出力に表示されるかどうかを確認します。

PDF:

ただし、PDF ファイル内のフォーム入力やボタンを操作することはできません。

要約する

jsPDF ライブラリは、HTML コンテンツ (フォームを含む) を PDF 形式に変換する便利な方法を提供します。

全体のプロセスは非常に簡単です。新しい jsPDF オブジェクトを作成し、html() メソッドを呼び出してコンテンツを指定し、save() メソッドを使用して出力ファイルを生成します。

さらに、方向、単位、形式などのオプションを使用して PDF 出力をカスタマイズできます。

全体として、jsPDF を使用すると、Web アプリケーションで HTML コンテンツから PDF ファイルを作成するプロセスが簡素化されます。

最後に、読んでいただきありがとうございます。

JS を使用して HTML ページまたはフォームを PDF ドキュメントに変換する方法

おすすめ