動的PDF v/s HTMLからPDF

Question

私は現在、医療業界向けの複数のダッシュボードに取り組んでいます。一般的な要件の1つは、そのまま画面からPDFを生成することです。これらのダッシュボードには共通のCRUD操作はありません。彼らは通常、多くのチャート（ハイチャートを使用）、いくつかの表データ、アコーディオンなどを含みます。そして、すべては、ページロード時に発生するいくつかのselectステートメントの一部として、またはユーザーが何らかのチャートやHTML要素。

私はこれを行う方法を検討しています.2つのオプションがあります。最もよく知られているオプションは、サードパーティのライブラリを使用してHTML自体からPDFを生成することです。 -4行のコード。

もう1つの選択肢は、UIのように見えるPDFを動的に生成するコードを記述することです。ブランディングとスタイリングを考慮する必要があるため、ダッシュボードのUIとまったく同じように見えるチャートを生成し、ダッシュボードのUIのように表形式のデータを作成する必要があるため、これ以上の労力が必要です。

すべてのダッシュボードの共通のUI要件は、IE、9、forefox、Chrome、Safariから始まるすべての主要なブラウザをサポートすることです。また、iPhoneやその他の最も一般的なデバイスの3-4バージョンのiPadsもサポートしています。

これらのダッシュボードに使用するテクノロジは、Angular 2.0、JQuery、HTML、CSS、asp.net web api、場合によってはasp.net MVCです。

これらのダッシュボードすべてに対してPDFを生成する上の2つの方法の賛否両論を知る必要があります。私はこれについてはほとんど見つかりませんでしたグーグル。誰かがこれにいくつかの洞察を共有し、彼らの経験に基づいていくつかのインプットを与えることができますか？

Answer 1

あなたの記述に基づいて、少なくとも2つの組み合わせをしたいと思うでしょう。 HTML-to-PDFコンバータを使用することができれば、開発時間を大幅に節約することができます。しかし、UIにはアコーディオンなどがあるため、動的情報を静的PDFに表示する方法を決定する必要があります。

だから私は過去に使用したハイブリッドアプローチは、このようなHTMLをマークアップするために角度を使用することです：

<my-accordion ng-if="!ExportingPDF"> ... accordion view for browser ...</my-accordion> 
<div ng-if="ExportingPDF"> ... expanded and slightly-modified view for PDF ... </div> 

ユーザーは、「エクスポートPDF」ボタンをクリックすると、あなたが関数を作成することができます$scope.ExportingPDF = trueを実行し、ページの表示可能なすべてのHTMLを取得します（短い時間の後に$timeout遅延を適用してDOMの更新時間を指定します）。

ExportPDF関数は、サーバベースのHTML-to-PDFコードライブラリがHTMLを変換し、ファイルダウンロード添付ファイルとしてブラウザに送り返すサーバにHTMLをPOST送信します。

例コード：

$scope.ExportPDF = function() { 
    $scope.ExportingPDF = true; 
    $timeout(function() { 
     $ajax.post("/path/to/conversion-routine.abc", { data: $('html')[0].outerHTML } 
    }, 50); // short delay so Angular has time to update the DOM 
} 

これはまだ、静的なPDF文書に適切に提示するように調整する必要があるすべての奇妙な小さなUIの物事に対処しながら、角度のパワーと、既存のマークアップを利用することができます。