是否有通用方法可以在多页上计算和显示图像，而与jspdf中的分辨率/浏览器缩放级别无关

如何解决是否有通用方法可以在多页上计算和显示图像，而与jspdf中的分辨率/浏览器缩放级别无关

我有一个数据网格，需要将其下载为PDF。所以我正在使用jspdf和html2canvas。网格可以是多页，因此我需要手动计算图像的左侧高度才能正确显示。

我这样做了（对值进行了硬编码），但后来意识到由于他的屏幕分辨率不同，该图像在同事的监视器中被剪切了。

我采用window.innerWidth值并尝试解决我的问题，但这无济于事，因为它因屏幕而异（例如1366、1536、751、1396、1023、1422、1517等）

是否有任何通用方法或功能可以正确显示图像而不会被剪切，无论屏幕分辨率/浏览器缩放级别是什么？

这是我的代码：

.ts：

downloadTestPDF() {
    setTimeout(() => {
      const pdf = new jsPDF({
        orientation: 'landscape',unit: 'mm',format: 'a4'
      });
      const imgWidth = 252;

      html2canvas(this.data.nativeElement,{ scale: 1 }).then(canvas => {
        const imgHeight = canvas.height * imgWidth / canvas.width;
        let heightLeft = imgHeight;
        let position = 0;

        pdf.addImage(canvas.toDataURL('image/png'),'PNG',23,52,imgWidth,imgHeight);

        heightLeft -= 145;                 // Hard coded value

        // Adding white space to bottom of the page (Bottom margin)
        pdf.setFillColor('white');
        pdf.rect(15,196,260,20,'F');

        // If image height is greater than page height
        while (heightLeft >= 0) {
          position = (heightLeft + 22) - imgHeight;
          pdf.addPage();
          pdf.addImage(canvas.toDataURL('image/png'),position,imgHeight);
          heightLeft -= 174;    // Hard coded value

          // Adding white space to top and bottom of the page (Top and bottom margin)
          pdf.setFillColor('white');
          pdf.rect(15,22,'F');
          pdf.rect(15,24,'F');
        }

        pdf.save('data-grid.pdf');
      });
    },500);
  }

.html：

<button (click)="downloadTestPDF()">Download PDF</button>
<div class="data-grid" #data>
  <div class="title">
    <div class="item">Client</div>
    <div class="item">Requested</div>
    <div class="item">Reserve</div>
    <div class="item">Accepted</div>
    <div class="item">Assigned</div>
  </div>
  <div class="data" *ngFor="let x of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,21,25,26,27,28,29,30,31]; let i = index;">
    <div class="item">Client {{i+1}}</div>
    <div class="item">{{ i+1 }}</div>
    <div class="item">2</div>
    <div class="item">2</div>
    <div class="item">2</div>
  </div>
</div>

这里是link的闪电战。 请在新窗口中打开输出

，然后单击“下载PDF”。

感谢您的帮助。