HTML から PDF への変換事例の概要 (複数の画像を推奨)

仕事の都合上、最近 HTML を PDF に変換する機能について調べることに時間を費やしました。 HTML を PDF に変換する際の重要な技術は、Web ページの複雑な CSS スタイルをどのように処理するかです。オンラインで情報を収集すると、HTML を PDF に変換するための現在のソリューションは主に次の 3 つのカテゴリに分かれていることがわかります。

クライアント モード: フロント エンドとバック エンドはクライアント プログラムを呼び出し、クライアント プログラムの機能を使用して PDF ファイルの変換を完了します。テスト ツールは、wkhtmltopdf と PhantomJS です。 Java jar パッケージ解析クラス モード: Java コードは CSS スタイルを解析し、HTML ファイルを PDF ファイルに変換します。テスト クラスは、IText、Flying Sauser、PD4ML です。 js フロントエンド解析モード: js フロントエンドは HTML ファイルを PDF ファイルに解析します。今回のテスト ケースは、html2canvas です。

今回、オンラインで紹介したソリューションを実際のプロジェクトのニーズと組み合わせて一つずつテストし、パフォーマンスと機能性の面で以下の分析を行いました。

1. テストページの紹介

インターネット上のさまざまな変換事例の紹介を見ると、PDF ファイルの変換では、シンプルな HTML スタイルと一般的な表スタイルがサポートされているようです。ただし、実際のビジネスニーズを考慮して、このテストでは特に Bootstrap (v 3.3.6) の CSS スタイルを使用し、ページでは CSS3 の新機能も適用しました。この新機能に基づいて、静的 HTML ページを作成します。ブラウザでの HTML ページの表示効果は次のとおりです。

2.wkhtmltopdfテスト

wkhtmltopdf は、HTML を PDF に変換するために WebKit Web レンダリング エンジンを使用して開発されたツールです。複数のスクリプト言語と統合してドキュメントを変換できます。公式ウェブサイトアドレス http://wkhtmltopdf.org/

技術的特徴: Wkhtmltopdf は、ブラウザで閲覧した Web ページを直接 PDF に変換できます。HTML ページを PDF に変換するソフトウェアです (サーバーにインストールする必要があります)。使用時には、Java コードを通じて cmd コマンドを呼び出して、Web ページを PDF に変換する機能を実行できます。

機能テスト: cmd にテスト コマンドを直接入力して、処理の進行状況を表示します。

最初のパラメータ: wkhtmltopdf.exe が配置されているパス

2番目のパラメータ: PDFに変換するHTMLページ

3番目のパラメータ: PDFファイルのパスとファイル名

ページのエクスポート効果は次のとおりです。

テストの説明:

テストを通じて、wkhtmltopdf は bootstap の CSS スタイルを全体的に適切にサポートしていることがわかりました。円形画像スタイルなどの新しい CSS3 機能のサポートが不十分です。一部のページ スタイルは無効になります。チャート表示の場合、Eachart チャート エクスポート プログラムはエラーを報告し、サポートされません。ただし、echart にはチャートを画像に変換するためのインターフェースがあり、画像アドレスを取得することで PDF にエクスポートできます。

3. PhantomJS テスト

PhantomJS は、WebKit カーネルをベースにしたヘッドレス ブラウザです。つまり、UI インターフェースを持たず、ブラウザではありますが、クリックやページめくりなどの人間が行う操作はプログラミングによる実装が必要です。 JavaScript API インターフェースを提供するため、JS プログラムを書くことで、WebKit カーネルと直接やりとりすることができます。さらに、Java 言語などを組み合わせて、Java 経由で js やその他の関連操作を呼び出すことができるため、WebKit に基づく高品質のコレクターを開発するには C/C++ しか使用できないという制限が解消されます。また、Windows、Linux、Mac などのさまざまなオペレーティング システム用のインストール パッケージも提供されているため、コレクション プロジェクトの二次開発やプロジェクトの自動テストをさまざまなプラットフォームで実行できます。公式ウェブサイトアドレス: http://phantomjs.org/

PhantomJS は Web ページ解析に利用でき、多くの機能があります。今回は Web ページのスクリーンショット機能のみを使用します。 cmd でのテストは次のとおりです。

テストページのエクスポート効果は次のとおりです。

テストの説明:

テストを通じて、PhantomJS はブートストラップ スタイルを適切にサポートしていることがわかりました。円形画像スタイルなどの新しい CSS3 機能のサポートが不十分です。一部のページ スタイルは無効になります。 echart チャート表示の場合は、直接エクスポートすることもできます。効果は以下のとおりです。

3. IText と Flying Sauser

IText は html2pdf を実装します。これは高速ですが、エラー修正機能が貧弱です。中国語をサポートしていますが (Unicode エンコードを使用するには HTML が必要です)、中国語フォントは 1 つしかサポートしていません。これはオープン ソースです。 Flying Sauser は html2pdf を実装しており、エラー修正機能が貧弱で、複数の中国語フォントをサポートしており (一部のスタイルは認識されません)、オープンソースです。

技術的特徴: Java プログラミングに基づいて HTML の CSS スタイルを解析および処理します。現在は、よりシンプルなページとスタイルのみをサポートしています。 CSS3 スタイルおよび関連する複雑な CSS スタイルとの互換性は非常に低いです。ページコンテンツが長い場合、処理時間が遅くなります。参照アドレス: https://code.google.com/archive/p/flying-saucer/

テスト結果: この実験のテスト ページは表示できません。通常のテスト ページの効果は次のとおりです。

テストの説明:

テストを通じて、IText と Flying Sauser の 2 つのオープンソース プロジェクトは基本的に CSS3 と互換性がないことが判明しました。情報を調べてみると、このテクノロジは比較的古く、このオープンソース プロジェクトは更新もメンテナンスもされていないことがわかりました。単純なテーブルと統計データのエクスポートの場合、新しいテクノロジには、ブートストラップ テーブルと easyui データグリッド テーブル エクスポートが含まれます。インターネットで紹介されているこの解決策は推奨されません。

4.PD4MLテスト

PD4ML は、HTML と CSS をページ レイアウトおよびコンテンツ定義形式として使用して PDF ドキュメントを生成する純粋な Java クラス ライブラリです。エンド ユーザーの PDF 生成作業を簡素化できます。参考ウェブサイト: http://www.pd4ml.com

このソフトウェアの利点は次のとおりです。

比較的完全な範囲の HTML タグと CSS 属性をサポートし、変換の歪みも比較的小さく、HTML + CSS を使用して正確なレイアウト制御を実現できます。 Web ページ ファイル タグと CSS 構文のエラーに対する許容度が向上しました。追加の制御なしで画像の変換と出力をサポートします。

このソフトウェアの欠点は次のとおりです。

オープンソースではなく、最新のデモ版をダウンロードしてテストしたところ、中国語変換をサポートしていないことがわかりました。商用版を購入する必要があります。 (ここが難しいところです。文字化けしたコードの問題でテストに合格できませんでした。後になって、そもそもサポートされていなかったことがわかりました。)クラッキング後の一部の古いバージョンでは、文字化けしたコードの問題は解決できますが、サポートされている CSS スタイルは新しいバージョンほど完全ではありません。

テスト結果:

テストの説明:

新しいバージョンでは中国語の文字が文字化けしますが、一部の CSS スタイルがサポートされています。旧バージョンを解読すると、インターフェーススタイルの互換性が悪く、bootsrtap のサポートも低いですが、基本的には問題なくデータを出力し、画像を表示できます。有料ソフトウェアであり、パフォーマンスが完璧ではないことを考慮すると、テンプレートのエクスポートやその他のツールを使用して通常のページをエクスポートすることはお勧めしません。

5.html2canvasテスト

Html2canvas は非常に優れた JavaScript ライブラリであり、HTML5 と CSS3 のいくつかの新機能を使用して、クライアント側で Web ページのスクリーンショットを撮る機能を実現します。 html2canvas は、ページの DOM と要素のスタイル情報を取得し、それをキャンバス イメージにレンダリングすることで、ページのスクリーンショットを撮る機能を実現します。サーバーからのレンダリングは必要なく、画像全体がクライアント ブラウザー上で作成されます。ブラウザが Canvas をサポートしていない場合は、代わりに Flashcanvas または ExplorerCanvas テクノロジが使用されます。次のブラウザはこのスクリプトを適切にサポートできます: Firefox 3.5+、Google Chrome、Opera 新バージョン、IE9 以上。ブラウザごとにページのレンダリング方法が異なるため、結果の画像も異なります。まだ開発段階ですが、期待していいと思います。このプラグインは jQuery プラグインに依存しているため、最新バージョンを使用することをお勧めします。

クロスドメイン画像はサポートされていません。ブラウザプラグインでは使用できません。一部のブラウザは SVG 画像をサポートしていません。Flash はサポートされていません。iream はサポートされていません (元の js コードを変更して、iream をサポートすることができます)。

html2canvas を使用してテストしたところ、echart チャートを含む多くのプロジェクト ページを正常にスクリーンショットできることがわかりました。いくつかの新しい CSS3 機能のみがサポートされていません。スクリーンショットの効果がさらに良くなりました。しかし、アプリケーションをテストしているときに、致命的な問題が発見されました。ページ モジュールがスクリーンショットを撮るために html2canvas を呼び出した後、元のページの CSS の一部が突然無効になったことが判明しました。追跡・解析した結果、html2canvas の js 関数が認識できない CSS スタイルを処理していたことが判明しました。特にモジュールの非表示と表示に関しては、サポートが親切ではありません。

ページのスクリーンショット効果は次のとおりです。

しかし、元のページの CSS が無効で、ページの動作が異常になり、一部のスタイルが非表示になり、表示されるスタイルが乱雑になります。

テストの説明:

テストを通じて、html2canvas は bootstap スタイルを適切にサポートしていることがわかりました。円形画像スタイルなどの新しい CSS3 機能のサポートが不十分です。主な利点は、フロントエンドが軽量であることです。元のページのスタイルを変更するには、まず画像をエクスポートしてからページを更新します。

6. まとめ

上記のケースをテストした結果、インターネット上で紹介されている HTML から PDF への一般的な変換方法のほとんどは、使用できる単純な HTML 変換であるものの、実際のアプリケーションでは依然として多くの問題があり、適用が難しいことがわかります。これらの方法の実装原則を分析すると、次の結論を導き出すことができます。

すべてのソリューションには、HTML ページを PDF に完全に変換する上で欠点があります。フォームページの一部だけの場合は、HTML スタイルで CSS3 属性を使用せず、クライアント モードと html2canvas を使用して処理するようにしてください。 HTML のフロントエンド スタイルは急速に発展しており、CSS3 の新機能は有効であり、CSS は新しいルールと構文を定義します。 IText や Flying Sauser などの Java 変換クラスは、これらの変更とまったく互換性がありません。これは、変換関数を時間内に記述することが不可能であり、これらのオープンソース プロジェクトは古いテクノロジであり、後発のオープンソース チームがそれらの保守と更新を停止しているためです。 PD4ML は、基本的に CSS の Java ベースのスタイル変換です。これは商用ソフトウェアであり、CSS3 互換性のチーム サポートがあります。パフォーマンスと機能の面で、IText や Flying Sauser よりも強力です。しかし、いくつかの CSS スタイルは適切にサポートされていません。そして、漢字の文字化けの問題を解決するのは簡単ではありません。クライアント ブラウザ カーネル モードに関しては、PhantomJS は wkhtmltopdf よりも強力です。スクリーンショットは、その小さな機能の 1 つにすぎません。Web ページの分析にも使用できます。PhantomJS を使用することをお勧めします。 html2canvas のスクリーンショット モードは柔軟性があり、軽量なフロントエンド スクリーンショット ツールです。現時点では、一部の機能が不完全ですが、全体的な効果は良好です。一部のスクリーンショットが元のページに影響を与える問題を解決するには、スクリーンショットを正常に保存してからページを一度更新すると、スクリーンショットを PDF にエクスポートする効果が得られます。

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してご連絡ください。123WORDPRESS.COM をご愛顧いただき、ありがとうございます。