我需要能够单击一个按钮并将模态窗口另存为 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");
}
});
}
谢谢你的帮助。