如何使用jsPDF和html2canvas打印全屏？

Question

演示

你好，我的应用程序中使用了Angular8。我使用jspdf和html2canvas将HTML转换为PDF。但我只能打印出半页而不是整页。

有人能帮助我找到问题所在吗？我附上了一个演示，当我在下拉列表中选择任何值时，会打开另一个div，因此我需要获取div部分中存在的全部值。请帮帮我。 以下是我得到的输出，但它并不包含我期望的所有值：

输出

如果有其他方法能够满足我的要求，也可以接受。

TS：

 public downloadPdf() {
    var data = document.getElementById('pdfDownload');
    html2canvas(data).then(canvas => {
      // Few necessary setting options
      var imgWidth = 208;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      alert(imgHeight)
      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      //  pdf.save('new-file.pdf');
      window.open(pdf.output('bloburl', { filename: 'new-file.pdf' }), '_blank');
    });
 
  }

- Bhrungarajni

Answer 1

为此，您需要在html2canvas方法中添加选项scrollY{scrollY：-window.scrollY}，它将截取完全呈现的页面的屏幕截图。

除此之外，我们知道滚动条中包含数据。为此，您需要暂时移除滚动条并在生成PDF后添加。您可以通过将id简单地添加到<ul class="list-group list-group-flush vert-scrollable-150" id="alldata">元素中来实现此目的。

// 用于禁用滚动

document.getElementById('alldata').style.overflow = 'inherit'; document.getElementById('alldata').style.maxHeight = 'inherit';

      async downloadPdf() {
    var data = document.getElementById('pdfDownload');
    $('pdfOpenHide').attr('hidden', true);
    // disable the scroll
     document.getElementById('alldata').style.overflow = 'inherit';
     document.getElementById('alldata').style.maxHeight = 'inherit';

   await  html2canvas(data, {scrollY: -window.scrollY, 
   scale: 1}).then(canvas => {
      // Few necessary setting options
      var imgWidth = 150;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      const contentDataURL = canvas.toDataURL('image/png', 1.0)
// enabling the scroll 
      document.getElementById('alldata').style.overflow = 'scroll';
        document.getElementById('alldata').style.maxHeight = '150px';

      let pdf = new jspdf('l', 'mm','a4'); // A4 size page of PDF
      var position = 0;
   // add tghis width height according to your requirement
      const divHeight = data.clientHeight
  const divWidth = data.clientWidth
  const ratio = divHeight / divWidth;

       const width = pdf.internal.pageSize.getWidth();
    let height = pdf.internal.pageSize.getHeight();
        height = ratio * width;
      pdf.addImage(contentDataURL, 'PNG', 0, position, width, height);
      window.open(pdf.output('bloburl', { filename: 'new-file.pdf' }), '_blank');
    }); 
}

如果数据在滚动条中更多，您也可以使用jspdf添加页面。

更多参考资料，请查看此链接

另一种解决方法：如果数据更多

   async downloadPdf() {
        var data = document.getElementById("pdfDownload");
        $("pdfOpenHide").attr("hidden", true);
        // To disable the scroll
        document.getElementById("alldata").style.overflow = "inherit";
        document.getElementById("alldata").style.maxHeight = "inherit";
    
        await html2canvas(data, { scrollY: -window.scrollY, scale: 1 }).then(
          canvas => {
            const contentDataURL = canvas.toDataURL("image/png", 1.0);
            // enabling the scroll
            document.getElementById("alldata").style.overflow = "scroll";
            document.getElementById("alldata").style.maxHeight = "150px";
    
            let pdf = new jspdf("l", "mm", "a4"); // A4 size page of PDF
    
            let imgWidth = 300;
            let pageHeight = pdf.internal.pageSize.height;
            let imgHeight = (canvas.height * imgWidth) / canvas.width;
            let heightLeft = imgHeight;
            let position = 0;
    
            pdf.addImage(contentDataURL, "PNG", 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
    
            while (heightLeft >= 0) {
              position = heightLeft - imgHeight;
              pdf.addPage();
              pdf.addImage(contentDataURL, "PNG", 0, position, imgWidth, imgHeight);
              heightLeft -= pageHeight;
            }
            window.open(
              pdf.output("bloburl", { filename: "new-file.pdf" }),
              "_blank"
            );
          }
        );
      }

- Sunny

---

谢谢您的回复，但我无法滚动，而且完整的高度和宽度也超出了范围。 - Bhrungarajni

有疑问，需要您的意见。 - Bhrungarajni

另外，在一台机器上，我可以看到47条记录，而在另一台电脑上只能看到43条。 - Bhrungarajni

是的，这是可能的。您目前使用的是哪种方法，html2canvas还是addHTML方法？ - Sunny

嗨，@Bhrungarajni 我已更新第二个解决方案。在这种情况下，如果有更多记录，它将打印数据到另一页。 - Sunny

Answer 2

试试这个：

public downloadPdf() {
    var data = document.getElementById('pdfDownload');
    html2canvas(data, { useCORS:true}) // useCORS is optional if your images are externally hosted somewhere like s3
    .then(canvas => {
      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jspdf('p', 'pt', [canvas.width, canvas.height]);
      var pdfWidth = pdf.internal.pageSize.getWidth();
      var pdfHeight = pdf.internal.pageSize.getHeight();
      pdf.addImage(contentDataURL, 'PNG', 0, pdfWidth, pdfHeight);
      //  pdf.save('new-file.pdf');
      window.open(pdf.output('bloburl', { filename: 'new-file.pdf' }), '_blank');
    });
 
  }

- Vaibhav Gidde

---

这对我有效，请更新传递给jspdf和addImage的参数。addImage需要x和y坐标，你只传递了0作为x，这会引发异常。 - Nabeel Hussain Shah

Answer 3

使用jspdf的addHtml方法直接从html中创建pdf，而不是从图像中创建pdf，这可以解决您的问题。我已经创建了下面的代码，请使用它。

您需要将此脚本添加到index页面的头部部分。

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

public downloadPdf() {
$("pdfOpenHide").attr("hidden", true);
var removeClass = document.getElementsByClassName("vert-scrollable-150");
removeClass[0].classList.add("RemoveThisClass");
removeClass[0].classList.remove("vert-scrollable-150");

var data = document.getElementById("pdfDownload");
const pdf = new jspdf("p", "pt", "a4");
pdf.addHTML(data, () => {
  window.open(
    pdf.output("bloburl", { filename: "new-file.pdf" }),
    "_blank"
  );
});
var addClass = document.getElementsByClassName("RemoveThisClass");
addClass[0].classList.add("vert-scrollable-150");
addClass[0].classList.remove("RemoveThisClass"); 

}

它会为您工作。您还可以参考htmltopdf转换器

- Hitesh Kansagara