angular - 如何使用jspdf和html2canvas全屏打印

Question

DEMO
嗨，我在我的应用程序中使用 Angular8。在这里，我使用 jspdf 和 html2canvas 将 html 转换为 pdf。但我只能打印半页而不是整页。
任何人都可以帮助我哪里出错了。
我附上了一个演示，当我在下拉列表中选择任何值时，会打开一个 div，所以我需要获取 div 部分中所有存在的完整值。请帮忙。
我得到这样的输出，但它不包含按预期的完整值:
Output
如果有任何其他方法可以按照我的要求提供输出也可以接受。
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');
    });
 
  }

Answer 1

为此，您必须在 html2canvas 方法 scrollY 中添加选项
{scrollY: -window.scrollY} 它将截取完全渲染页面的屏幕截图。
html2canvas(数据，{scrollY:-window.scrollY，比例:1}
除此之外，正如我们所知，滚动条中存在数据。为此，您必须暂时删除滚动并需要在 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 = '继承';

      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 添加页面。
如需更多引用，您可以查看此
HTML2Canvas does not render full div, only what is visible on screen?
另一个解决方案:如果数据更多

   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"
            );
          }
        );
      }