jsPDF - 正确捕获一个html页面为PDF

我需要一张表格作为PDF格式打印，而不是忽略绑定到表格的css。我也使用angularjs。我正在看不同的方式，我正在试验jsPDF。jsPDF - 正确捕获一个html页面为PDF

在主页面（rollup.html）上，我有应该以pdf的形式导出表格的链接。

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

在控制器内的JS（rollup.js），我有应显示任何包含在ID #testDiv内genPDF功能。

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。在控制台的jsPDF方法被证明

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

没有错误，所以不知道是什么问题。任何帮助表示赞赏。谢谢

来源

2017-02-13 Adrew

我强烈建议通过此link在GitHub上查看jsPDF - AutoTable库。我最近遇到了一个与你非常相似的场景，并发现在这种情况下维护CSS很困难。这个解决方案对于很多用例来说是完美的，并且比单独依靠jsPDF更有效和更有效地解决了我的问题。希望这可以帮助！

来源

2017-02-13 23:11:14

谢谢。我正在研究它 – Adrew

我一直在遵循的教程是[this]（https://www.youtube.com/watch?v=WJOfCnoqShw）这显示了如何快速打印html作为pdf使用jsPDF，但似乎没有为我工作。你发送给我的方法好像我必须用用户输入和css重新创建整个表格。 – Adrew

我确实亲自查看了您希望使用的选项，但是存在与CSS和浏览器的选择有关的缺陷，这些缺陷将最终确定PDF文档的输出。 jsPDF AutoTable库是一种更加流畅的方法，可以确保您的内容正确布置，无论发现何种限制。虽然这是额外的工作，但它最终确实还清，并且从长远来看更易于管理。 –

jsPDF - 正确捕获一个html页面为PDF

回答

相关问题