jsPDF - 将 html 页面准确捕获为 PDF答案

【问题标题】：jsPDF - Exactly capture a html page to PDFjsPDF - 将 html 页面准确捕获为 PDF
【发布时间】：2017-07-01 23:58:43
【问题描述】：

我需要将表格打印为 pdf，而不是关闭与表格绑定的 css。我也在使用 angularjs。我正在寻找不同的方法，并且正在尝试使用 jsPDF。

在主页 (rollup.html) 上，我有应该将表格导出为 pdf 的链接。

<a style="float: right;"  href="genPDF()">PDF TEST</a>

在控制器内的 js (rollup.js) 中，我有 genPDF 函数，它应该显示 id #testDiv 中包含的任何内容。

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
....
function genPDF(){
    html2canvas(document.getElementById("testDiv"), {
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png");
            var doc = new jsPDF();
            doc.addImage(img, 'JPEG',20,20);
            doc.save('test.pdf');
        }
    });
}
});

当然，我将 testDiv 分配给包含我要打印的表格的 div（位于 route.html 中）

<div class="content-div" style="overflow: visible;" id="testDiv">
....
</div>

我有另一个按钮，它使用 ng-click 用于其余选项卡，并广播来自其他表的数据，这些表更简单，没有 css。不确定我是否应该尝试使用 ng-click 打印表格并广播表格数据，但也包含所有 css。

        <li style="float: right;">      
            <button ng-click="printDiv('rollup-tab')">Printer Friendly</button>
        </li>

jsPDF 方法的控制台中没有显示错误，因此不确定问题所在。任何帮助表示赞赏。谢谢

【问题讨论】：

标签： html css angularjs pdf jspdf

【解决方案1】：

我强烈建议您通过 link 查看 GitHub 上的 jsPDF - AutoTable 库。我最近遇到了与您的情况非常相似的情况，发现在这种情况下维护 CSS 很困难。这个解决方案非常适合许多用例，并且比单独依赖 jsPDF 更有效地解决了我的问题。希望这会有所帮助！

【讨论】：

我一直在关注的教程是this 这显示了如何使用 jsPDF 拍摄 html 的快照以打印为 pdf，但似乎对我不起作用。您发送给我的方法似乎我必须使用用户输入和 css 重新创建整个表。
我个人确实研究了您更喜欢使用的选项，但存在与 CSS 和最终决定 PDF 文档输出的浏览器选择相关的缺点。 jsPDF AutoTable 库是一种更加流畅的方法，可确保您的内容布局正确，而不管识别出的限制如何。虽然这是一项额外的工作，但它最终会得到回报，并且从长远来看更易于管理。