htmlからpdfへの変換は、いくつかの要約の場合（より多くの画像をお勧めします）。

キーテクノロジーのpdf変換にhtmlは、Webページ内の複雑なCSSスタイルに対処する方法であり、インターネット上の情報の収集を通じて、現在のhtmlはpdf変換ソリューションに分かれていることを発見した3つのカテゴリに分かれています。

クライアントサイドモード : クライアントプログラムの機能を利用して、pdfファイルの変換を完了させるフロントコールとバックコールを行います。テストツールはwkhtmltopdfとPhantomJSです。 java jarパッケージ解析クラスモード：cssスタイルを解析するJavaコード、pdfファイルのためのhtmlファイルを変換します。このテストクラスは持っています。IText, Flying Sauser, PD4ML。 jsフロントエンド解析モード：jsフロントエンドでhtmlファイルをpdfファイルに変換、このテストケースは：html2canvasを持っています。

実際のプロジェクトの要件と組み合わせて、オンラインで導入されたプログラムのこの時間は、パフォーマンスと機能の面で、次の分析を行うには、1つずつテストを行います。

1. テストページ紹介

インターネット上の各変換事例を見ると、単純なhtmlスタイル、pdfファイル変換を行う際の一般的なテーブルスタイル、上記のオプションがサポートされています。しかし、実際の業務上の必要性を考慮し、今回のテストではあえてブートストラップ（v3.3.6）のcssスタイルを使用し、ページもcss3の新機能を適用しています。このような新機能をベースに、静的なhtmlページを作成しています。ブラウザで表示すると、次のようになります。

2.wkhtmltopdfテスト

wkhtmltopdfは、Webレンダリングエンジンwebkitを用いて開発された、htmlをpdfに変換するツールで、様々なスクリプト言語と統合して文書を変換することができます。公式サイトアドレス http://wkhtmltopdf.org

技術的な特徴 wkhtmltopdfは、ブラウザで閲覧したWebページを直接pdfに変換できる、htmlページをpdfに変換するソフトウェアです（サーバーにインストールする必要があります）。サーバーにインストールする必要があります）。これを使用する場合、Javaコードを通してcmdコマンドを呼び出し、Webページをpdfに変換する機能を完成させることができます。

機能テスト。cmdで直接テストコマンドを入力し、処理の進捗を確認します。

最初のパラメータ：wkhtmltopdf.exeが置かれているパス

2番目のパラメータ：htmlページをpdfに変換する必要性

第3パラメータ：PDFファイルのパスとファイル名

ページ書き出しの効果は次のとおりです。

テストの指示

テストを通じて、wkhtmltopdfはブートスタップCSSスタイルに全体的によく対応していることがわかりました。円形画像スタイルのサポートラインなど、css3の新機能はよくありません。いくつかのページスタイルが失敗します。チャート表示については、各artチャートエクスポートプログラムは、サポートされていない、エラーを報告します。しかし、echartにはチャートを画像に変換するインターフェースがあり、画像のアドレスを取得することでpdfに書き出すことができます。

3. PhantomJSのテスト

PhantomJSは、webkitカーネルをベースにしたヘッドレスブラウザです。つまり、UIインターフェースはなく、ブラウザであり、その中でクリックやページめくりなどの人間に関わる操作だけがプログラムによって実装される必要があります。javaScript APIインターフェイスを提供し、つまり、JSプログラムを書くことによって、直接webkitカーネルと対話することができ、この上にJava言語などと組み合わせることができ、Javaコールjsと他の関連する操作を介して、このように以前のc/c++は、品質コレクターの制限のwebkit開発に基づいてより良いものにすることが解決します。また、Windows、linux、macなどの異なるOSのためのインストールと使用パッケージを提供し、それはコレクションプロジェクトの二次開発または自動プロジェクトのテストと他の仕事のための異なるプラットフォームで使用することができることを意味します。公式サイトアドレス http://phantomjs.org

PhantomJSは多くの関数でWeb解析を行うことができますが、今回はWebページのスクリーンショット関数のみを呼び出します。cmdでのテストは以下の通りです。

テストページの書き出し結果は以下の通りです。

テストの指示

テストを通じて、PhantomJSはbootstapスタイルによく対応していることがわかりました。円形画像スタイルのサポートラインなど、css3の新機能はよくありません。いくつかのページスタイルが失敗します。echartチャート表示については、直接エクスポートすることも可能です。効果は以下の通りです。

3.ITextとフライング・ザウザー

html2pdfのIText実装、高速、エラー訂正能力低い、中国語のサポート（unicodeエンコードを使用したHTMLが必要）、ただし中国語フォントのサポートでは、オープンソース。 flying html2pdfのSauser実装、エラー訂正能力低い、各種中国語フォントのサポート（一部のスタイルは認識できない）、オープンソース。

技術的特徴： 解析を行うためにJavaプログラミングに基づいてHTMLのCSSスタイル 、現在唯一のシンプルなページとスタイルのサポートのために。css3スタイルと関連する複雑なCSSスタイルの互換性は非常に悪いです。ページのコンテンツが長い場合、処理時間が遅いです。参考アドレス：https://code.google.com/archive/p/flying-saucer

テスト結果 本実験のテストページが出なかったため、通常のテストページでの効果は以下の通りです。

テストの指示

テストを通じて、ITextとフライングSauser 2つのオープンソースプロジェクトのcss3の互換性は基本的にすることはできませんが、情報を参照することにより、この技術は比較的古いことがわかった、このオープンソースプロジェクトが更新され、現在維持されていない。単純なテーブルの場合は、統計データのエクスポート、更新された技術のブートストラップテーブル、easyui datagridテーブルのエクスポートです。このプログラムは、オンラインを導入することはお勧めできません。

4.PD4MLテスト

PD4MLは、HTML、CSSをページレイアウトとコンテンツ定義のフォーマットとして使用し、PDFを生成する際にエンドユーザーの作業を簡素化する強力なツールを備えたピュアJavaクラスライブラリです。参考サイト http://www.pd4ml.com

このソフトの利点は

サポートされているHTMLタグ、CSS属性はより完全で、変換の歪みは比較的小さく、あなたはHTML + CSSを使用して、正確なレイアウト制御を実現することができます。ウェブファイルのタグ、CSSの構文エラーに対する耐障害性がより良い。追加制御なしで画像の変換出力に対応。

欠点は

オープンソースではなく、最新のデモ版を、ダウンロードしてテストしたところ、中国語変換に対応していないことが判明。できるようにするには、製品版を購入する必要があります。(ここでは非常にかわいそうな、テスト面倒なコードの問題は渡すことができない、後で発見されたもともとサポートされていません）。古いバージョンのいくつかは、文字化けしたコードの問題を解決することができますが、CSSスタイルのサポートは、新しいバージョンとして完全ではありません割れた。

テスト結果です。

テストの指示

中国の混乱の新バージョンが、CSSスタイルの一部をサポートしています。古いバージョンが壊れている、インターフェイスのスタイルの互換性が悪く、bootsrtapのサポートが低い、基本的には、データを取り出すことができ、問題なく画像を表示します。それは有料のソフトウェアであり、パフォーマンスが完璧ではないことを考えると、通常のページには、テンプレートや他のツールを使用してエクスポートすることができ、推奨されていません。

5.html2canvasのテスト

html2canvasは、html5とcss3の新機能のいくつかを使って、クライアント側でウェブページのスクリーンショットを撮るための素敵なJavaScriptライブラリです。html2canvasは、ページのDOMと要素のスタイル情報を受け取り、それをキャンバス画像としてレンダリングしてページのスクリーンショットを撮影します。サーバーからのレンダリングは必要ありません。サーバーからのレンダリングを必要とせず、画像全体がクライアントのブラウザで作成されます。ブラウザがCanvasをサポートしていない場合は、FlashcanvasまたはExplorerCanvasの技術を使って代わりに実装されます。このスクリプトは、以下のブラウザで十分にサポートされています。Firefox 3.5+、Google Chrome、Operaの新バージョン、IE9+。ブラウザごとにページのレンダリングが異なるため、生成される画像はまったく同じものではありません。まだ加工開発段階ですが、乞うご期待です。このプラグインはjQueryプラグインに依存しており、最新版を使用することが推奨されます。

クロスドメインに対応していない ブラウザのプラグインで使用できない SVG画像に対応していないブラウザがある Flashに対応していない ifreamに対応していない (オリジナルのjsコードを修正してifreamに対応させることは可能)

今回、html2canvasを使ってテストを行ったところ、エチャートチャートをはじめ、多くのプロジェクトページが普通にスクリーンショットできることがわかりました。css3の一部の新機能のみ未対応です。その上、スクリーンショットの効果も良くなっています。しかし、アプリケーションをテストしているときに、致命的な問題が見つかりました。html2canvasを呼び出したページモジュールでスクリーンショットを撮るとき、元のページのいくつかのcssが突然失敗することが分かりました。追跡して分析した結果、html2canvasのjs関数が認識できないcssスタイルを処理していることがわかりました。特にhiddenとdisplayのモジュールについては、対応が不親切です。

ページのスクリーンショットはこのようになります。

しかし、元のページのCSSが失敗し、ページが異常に表示され、スタイルの非表示部分、スタイル表示の表示が混乱します。

テストの指示

テストを通じて、html2canvasはbootstapスタイルによく対応していることがわかりました。css3 の新機能である円形画像スタイルのサポートラインは良くありません。その主な利点は軽いフロントエンド、元のページのスタイルの問題を変更するには、最初に画像をエクスポートしてから、もう一度ページをリフレッシュすることができます。

6. まとめ

上記のケースのテストを通じて、インターネットは、一般的に使用されるpdfのメソッドにhtmlの変換を導入し、そのほとんどは、単純なhtmlの変換が可能ですが、実際には、まだ多くの問題がある、それは適用が困難である。これらのメソッドの実装の原則を分析することにより、次の結論を引き出すことができます。

htmlのページがpdfへの完全な変換は、すべてのプログラムが欠点を持っています。フォームページの一部だけであれば、htmlのスタイルは、可能な限りcss3のプロパティなしで、利用可能なクライアント側のモードとhtml2canvas処理。htmlのフロントエンドスタイルの開発が速く、css3の新機能も動作、cssは新しいルール、構文を定義します。PD4Mも本質的にJava処理のcssスタイル変換なので、ITEXTとフライングサウザーなどのJava変換クラスが、単にこれらの変更と互換性はない彼は商用ソフトウェア、css3互換チームのサポート、パフォーマンスと機能の面でのITEXTとフライングサウザーをより強力で相対。しかし、CSSスタイルのサポートの数が少ないのも悪いです。また、中国語のゴチャゴチャしたコード問題も不便です。クライアント側のブラウザカーネルモードでは、PhantomJSとwkhtmltopdfの比較では、PhantomJSはより強力ですが、スクリーンショットは小さな機能の一つであり、それを介して、また、Web解析を行うことができます、我々はPhantomJSを使用することをお勧めします。今のところ、いくつかの機能は完全ではありませんが、全体的な効果は、スクリーンショットの一部は、元のページに影響を与えるために、あなたが最初のスクリーンショットが正常に保存することができ、ページを一度更新した後、PDFへのスクリーンショットの輸出の効果を実現するために悪くないです。

上記は、この記事のフルコンテンツです、私はあなたの勉強や仕事のためのこの記事の内容は、いくつかの助けをもたらすことができる願っています〜あなたが交換するメッセージを残すことができる質問がある場合は、スクリプトの家をサポートしていただきありがとうございます！.