Question

我需要能够单击按钮并将模态窗口另存为PDF。它需要采用样式和div内部的所有内容来构建模态。

我没有绑定任何特定的库，但我需要使用客户端库来实现这一点。我的项目是使用ASP.NET MVC＆amp; amp; AngularJS。

我正在使用pdfMake和html2canvas。 Html2canvas将div内容保存为画布，而pdfMake获取画布/图像并将其保存为PDF。

当数据/记录数量有限（通常在15左右）时，这对我的模态很有用。无论何时显示更多记录，PDF都只用空白页面呈现。

我不确定如何解决此问题，以便使用我的所有数据呈现/生成PDF。我认为它可能与HTML2Canvas部分有关，而不一定与数据有关。开发人员的代码examples是多页文本，可以快速准确地呈现。这告诉我，我要么缺少某些设置，要么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>

角/使用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");
        }
    });
}

谢谢你的帮助。

Answer 1

这可能会有所帮助：

$scope.pdfExport = function () {
     html2canvas($("#Div"), {
                        onrendered: function (canvas) {
                            var doc= new jsPDF("l", "mm", "a4");
                            var imgData = canvas.toDataURL('image/jpeg', 1.0);
                            doc.addHTML(document.getElementById("Div"), function () {
                                doc.save('file.pdf');
                            });

                        }
                    });
 };

或者您可以使用这些代替doc.addHTML：

doc.addImage(imgData, 'JPEG', 10, 10, 180, 150);  // 180x150 mm @ (10,10)mm
                        doc.save('file.pdf');

使用doc.addImage帮我解决了这个问题

更新：

我在另一篇文章中发现这个答案真有帮助 https://stackoverflow.com/a/34934497/8466944

将HTML另存为PDF

1 个答案: