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>

角/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

0

这可能会有所帮助：

$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

于 2017-08-15T12:21:20.197 回答