有没有办法打印出网页的特定div为pdf?

时间:2017-11-17 12:24:21

标签: javascript pdf phantomjs

我希望能够将特定div打印为PDF和JPG。我在运行phantomjs时使用了以下代码:

var bb = page.evaluate(function() {
  return document.getElementsByTagName("fieldset")[7].getBoundingClientRect();
});

page.clipRect = {
  top: bb.top,
  left: bb.left,
  width: bb.width,
  height: bb.height
};

这适用于PNG,但对于PDF,它只打印整个页面。有谁知道为什么会这样,以及如何解决它?如果有人知道解决这个问题的任何其他方法,即使是不涉及幻影或某些前端解决方案的事情,如果他们分享,我也会非常感激。

编辑我正在寻找解决此问题的方法,任何前端或后端解决方案都是可以接受的。但是,之前关于此主题的一些问题提供了涉及html2canvas或jsPdf的建议,但那些有解决问题,所以任何其他答案解决方案将不胜感激。

1 个答案:

答案 0 :(得分:4)

我需要将div发送给PDF,我使用这段代码并且对我来说很好。 (需要JQuery)。

 function testPdf(){
 
    //send the div to PDF
    html2canvas($("#DIV_ID_HERE"), { // DIV ID HERE
        onrendered: function(canvas) {
            var imgData = canvas.toDataURL('image/png'); 
            var doc = new jsPDF('landscape');
            doc.addImage(imgData, 'PDF', 10, 10);
            doc.save('sample-file.pdf'); //SAVE PDF FILE
        }
    });

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<div id="DIV_ID_HERE">
 
 Test - This div to pdf
 <br><input type="button" value="print" onclick="testPdf();">
<div>