js または php を使用して HTML Web ページを PDF に変換する方法

著者：Eve Cole 更新時間：2024-12-13 08:48:02

Downcodes のエディターは、JavaScript と PHP を使用して HTML Web ページを PDF ファイルに変換する方法に関するチュートリアルを提供します。この記事では、JavaScript ライブラリ jsPDF を使用する方法と、PHP ライブラリ TCPDF または mPDF を使用する 2 つの方法について詳しく説明します。 jsPDF ライブラリではクライアント側で直接変換できますが、PHP ライブラリではサーバー側での処理が必要です。 jsPDFの使い方とコード例を中心に、ライブラリの導入、HTMLコンテンツの処理、PDFインスタンスの作成、形式の調整、ファイルの保存などの手順を説明します。また、PHPを使用した変換方法と高度な機能についても簡単に紹介します。 . 画像、透かし、ヘッダーおよびフッターなどの追加などの実装。どの方法を選択する場合でも、この記事は HTML から PDF への変換を効率的に完了するのに役立ちます。

Web ページを PDF に変換することは一般的な要件であり、これにより Web サイトのコンテンツを固定形式で保存できるようになります。 JavaScript または PHP を使用して HTML Web ページを PDF に変換するには、JavaScript ライブラリの使用と PHP ライブラリの使用が含まれます。これらの変換ツールの中で、jsPDF や html2pdf.js などの JavaScript ライブラリは非常に人気があり、PHP には TCPDF や mPDF などのライブラリがあります。ここでは、JavaScript の jsPDF ライブラリを使用して変換を行うことに焦点を当てます。これは、jsPDF ライブラリが優れたクライアントサポートを提供し、操作が簡単で、サーバーと通信せずに変換を完了できるためです。

jsPDF は純粋な JavaScript で書かれたライブラリで、フロントエンド環境で動作し、バックエンドのサポートを必要としません。 jsPDF を使用するには、まずそのライブラリファイルをプロジェクトに導入する必要があります。 jsPDF の GitHub リポジトリまたは npm 経由でインストールできます。 jsPDF ライブラリを導入すると、JavaScript コードを使用して HTML のコンテンツを読み取り、jsPDF が提供する API を使用して PDF ファイルを生成できるようになります。

1. JSPDFライブラリの紹介

変換プロセスを開始するには、まず jsPDF を Web ページにインポートする必要があります。 jsPDFライブラリを直接ダウンロードして渡すことができます。

または、npm を使用してインストールします。

npm インストール jspdf

次に、それを JavaScript ファイルにインポートします。

jspdf から { jsPDF } をインポートします。

2. HTML コンテンツを選択して変更する

PDF を生成する前に、変換された PDF ファイルがニーズを満たすように HTML を変更することができます。たとえば、特定のページ要素を非表示にして、メインコンテンツのみを保持する必要がある場合があります。

// 変換する必要がある HTML 要素を取得します

const 要素 = document.getElementById('content-to-pdf');

// 不要な要素を非表示にするなど、HTML コンテンツを変更します。

element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');

3. JSPDFインスタンスの作成とHTMLの変換

新しい jsPDF インスタンスを作成し、jsPDF が提供する API を使用して HTML 要素を読み取り、PDF 形式に変換します。

const doc = 新しい jsPDF();

// ページを A4 サイズの PDF でレンダリングするとします。

doc.html(ドキュメント.ボディ, {

コールバック: 関数 (ドキュメント) {

doc.save('webpage.pdf');

}、

×：10、

y:10、

幅: 190、

windowWidth: document.body.scrollWidth

});

4. PDFの形式とレイアウトを調整する

変換プロセス中に、ページサイズ、余白、横向きで印刷する必要があるかどうかなど、PDF の形式とレイアウトを調整する必要がある場合があります。

const doc = 新しい jsPDF({

方向: 'p', // 縦向き

Unit: 'mm', // 単位はミリメートルです

format: 'a4', // 形式は A4 用紙です

});

5. PDF ファイルを保存する

HTML コンテンツが PDF に変換されたら、save() メソッドを使用してファイルを保存したり、結果の PDF データを処理したりできます。

doc.save('converted-webpage.pdf'); // PDF ファイルを保存します。

6. PHP を使用して HTML を PDF に変換する

サーバー側で HTML から PDF への変換を実行する場合は、TCPDF や mPDF などの PHP ライブラリを使用できます。これらのライブラリを使用するには、まず、通常は Composer を通じて、それらを PHP 環境に導入する必要があります。

作曲家には tecnickcom/tcpdf が必要です

次に、PHP スクリプトで TCPDF オブジェクトを作成し、そのオブジェクトが提供するメソッドを使用して HTML コードを PDF 形式に変換します。

require_once('tcpdf_include.php');

// 新しい PDF ドキュメントを作成する

$pdf = 新しい TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

//ドキュメント情報を設定する

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor('あなたの名前');

$pdf->SetTitle('TCPDF 例 001');

$pdf->SetSubject('TCPDF チュートリアル');

$pdf->SetKeywords('TCPDF, PDF, 例, テスト, ガイド');

//ページを追加する

$pdf->AddPage();

//設定内容

$html = '

TCPDF へようこそ!

$pdf->writeHTML($html, true, false, true, false, '');

// PDFを出力する

$pdf->Output('example_001.pdf', 'I');

7. スタイルとフォントの管理

PDF 変換を扱うときは、結果の PDF ファイルが Web コンテンツのスタイルを確実に保持できるように、ドキュメント内のスタイルとフォントを考慮する必要がある場合があります。

jsPDF と TCPDF は両方とも、スタイルの基本サポートを提供します。CSS スタイルを HTML で直接使用したり、PDF の生成時にスタイルを適用したりできます。ただし、PDF は Web ページとまったく同じようにレンダリングされるわけではないため、若干の違いが生じる場合があります。 jsPDF の場合、プラグインを通じて CSS のサポートを強化できます。 TCPDF では、最良の結果を得るために CSS を慎重に調整する必要があります。

doc.setFont(helvetica);

doc.setFontStyle(太字);

doc.setFontSize(16);

doc.text(Hello World!, 10, 10);

$html = '

青いタイトルです。

$pdf->writeHTML($html, true, false, true, false, '');

8. 高度な機能とカスタマイズ

PDF 変換プロセス中に、ヘッダーとフッター、透かし、表、画像などの追加など、いくつかの高度な機能を処理する必要がある場合もあります。これらの機能は通常、jsPDF および TCPDF ライブラリでサポートされていますが、実装方法は若干異なります。特定のニーズに応じて、対応するライブラリ関数を呼び出してそれを実現できます。

jsPDF は、画像を追加するための addImage() やドキュメントのプロパティを設定するための setProperties() など、PDF の機能を強化するためのさまざまなメソッドを提供します。

// 画像を追加

doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

TCPDF は、PDF の高度なコンテンツを処理するための強力な機能も提供します。

// ヘッダーを設定します

$pdf->setHeaderData('', 0, 'タイトル', 'ヘッダー', array(0,64,255), array(0,64,128));

$pdf->setHeaderFont(Array('helvetica', '', 10));

//ウォーターマークを追加する

$pdf->SetAlpha(0.3);

$pdf->Image('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);

//完全な透明度を復元します

$pdf->SetAlpha(1);

要約すると、JavaScript または PHP を使用して HTML Web ページを PDF ファイルに変換するには、適切なライブラリの選択、Web ページのコンテンツの処理、PDF レイアウトの調整、およびライブラリが提供する高度な機能を使用して複雑なカスタマイズ要件を達成する必要があります。クライアント側で jsPDF を選択するか、サーバー側で TCPDF を選択するかに関係なく、基本的な実装手順と方法は似ています。具体的な実装では、プロジェクトの実際のニーズと環境に基づいて、最も適切なツールと方法を選択する必要があります。