0

ボタンをクリックして、モーダル ウィンドウを PDF として保存できるようにする必要があります。モーダルが組み込まれている div 内のスタイリングとすべてのコンテンツを取得する必要があります。

私は特定のライブラリに縛られていませんが、これを機能させるにはクライアント側のライブラリを使用する必要があります。私のプロジェクトは ASP.NET MVC と AngularJS で構築されています。

私はpdfMakeとhtml2canvasを使用しています。Html2canvas は div コンテンツを取得してキャンバスとして保存し、pdfMake はキャンバス/画像を取得して PDF として保存します。

これは、データ/レコードの量が限られている場合 (通常は約 15)、私のモーダルではうまく機能します。より多くのレコードが表示されるときはいつでも、PDF は空白のページだけでレンダリングされます。

PDFがすべてのデータでレンダリング/生成されるように、これを修正する方法がわかりません。私はそれが HTML2Canvas 部分に関連している可能性があり、必ずしもデータに関連しているとは考えていません。開発者によるコード例は複数ページのテキストであり、高速かつ正確にレンダリングされます。これは、いくつかの設定が欠落しているか、HTML2Canvas と pdfMake の間に比較可能性の問題がある可能性があることを示しています。

以前に jsPDF を試しましたが、明らかに CSS ではうまく機能しません。エクスポートされたファイルを正しいスタイルで保存できませんでした。

AngularJS ng-click を使用して JS メソッド printHistoricalData() を呼び出しています。

データ レコードが限られている場合に、現在 HTML を PDF として保存する私のコードを次に示します。

HTML

<button type="button" class="btn btn-default pull-right" ng-click="printHistoricalData()">PRINT</button>

<div id="historicalDataModal">
     <div class="modal-body">
          Modal Data Here
     </div>
</div>

Angular/Javascript

  function printHistoricalData() {
    html2canvas(document.getElementById("historicalDataModal"), {
        onrendered: function (canvas) {
            var data = canvas.toDataURL("image/png");

            var docDefinition = {                      
                content: [
                    {
                        image: data,
                        width: 525,
                        alignment: "center"
                    }
                ],
                pageSize: "letter",
                pageOrientation: "portrait",
                styles: {
                    footer: {
                        fontSize: 8,
                        alignment: "center",
                        margin: [0, 0, 0, 80]
        }
                }
            };
            pdfMake.createPdf(docDefinition).download($scope.selectedGroup.title + ".pdf");
        }
    });
}

助けてくれてありがとう。

4

1 に答える 1