javascript - 有没有办法将网页的特定 div 打印为 pdf？

Question

我希望能够将特定的 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 它只会打印整个页面。有谁知道为什么会这样以及如何解决？如果有人知道解决此问题的任何其他方法，即使是不涉及 phantomjs 或某些前端解决方案的方法，如果他们分享，我将非常感激。

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

Answer 1

我需要将 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>