Angular项目中jsPDF跨操作系统渲染PDF差异问题求助

我在Linux系统的Angular项目中使用jsPDF库导出PDF，效果完全符合预期；但将同一代码部署到Windows和Mac系统后，导出的PDF内容大小约为预期的200%。

我尝试调整缩放比例，参考方案添加缩放系数后，仅第一页显示正常，从第二页开始内容会从第一页的中点位置被裁剪。更糟的是，这个修复方案会导致Linux系统上的导出效果变得很差。

想请教：

• 为何不同操作系统下渲染效果存在差异？
• 是否有其他开发者遇到过该问题？
• 这是jsPDF的已知bug吗？
• 我在查阅库文档时是否遗漏了关键内容？

相关代码 #

generateReport.ts 导出函数代码 #

declare global {
  interface Window { onePageCanvas: any; }
}

// 为提问简化硬编码
totalPages = 39;

openPDF(): void {
const firstPage = document.getElementById(`uniqueName1`) as HTMLElement
const firstPageRect = firstPage.getBoundingClientRect();
const topBuffer1 = document.getElementById("noPrint") as HTMLDivElement
const bufferRect1 = topBuffer1.getBoundingClientRect()
const topBuffer2 = document.getElementById("banner") as HTMLDivElement
const bufferRect2 = topBuffer2.getBoundingClientRect()

let DATA: any = document.getElementById('htmlData');
html2canvas(DATA).then((canvas) => {
 const firstPageOr = (firstPageRect.width > firstPageRect.height) ? "l" : "p";

 var pdf = new jsPDF(firstPageOr, 'px', [firstPageRect.width, firstPageRect.height], true);

 for (var i = 0; i <= this.totalPages; i++) {
   const singlePage = document.getElementById(`uniqueName${i + 1}`) as HTMLElement;
   if (singlePage) {
      console.log(`Generating Page ${i + 1} / ${this.totalPages}`)

      const pageRect = singlePage.getBoundingClientRect();

         var srcImg  = canvas;
         var sX      = 0;
         var sY = pageRect.top - (bufferRect1.height + bufferRect2.height);
         var sWidth  = pageRect.width;
         var sHeight = pageRect.height;
         var dX      = 0;
         var dY      = 0;
         var dWidth  = sWidth;
         var dHeight = sHeight;

         window.onePageCanvas = document.createElement("canvas");
         window.onePageCanvas.setAttribute('width', sWidth);
         window.onePageCanvas.setAttribute('height', sHeight);

         var ctx = window.onePageCanvas.getContext('2d');
         ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

         var canvasDataURL = window.onePageCanvas.toDataURL("image/png", 1.0);
             
         if (i > 0) {
            pdf.addPage([sWidth, sHeight], sWidth > sHeight? "l" : "p");
         }

         pdf.setPage(i+1);
         pdf.addImage(canvasDataURL, 'PNG', 0, 0, sWidth, sHeight);
    }
  }
 pdf.save('Test.pdf');
});
}

generateReport.html 代码 #

<div class="noPrint" id="noPrint">
  <button id="printButton" (click)="openPDF()" class="generateButton">Download PDF</button>
  <p style="display: none;" id="progress">
  </p>
</div>
<div id="htmlData" class="generalPage">
    <div *ngFor="let item of totalPages; index as i">
      <div class="reportPage" [id]="'uniqueName' + (i+1)">
        <div style="text-align: center;">
          <h3>Div/page {{i}}</h3>
        </div>
      </div>
    </div>
</div>

附加CSS代码 #

.generalPage {
  width: 900px;
  margin: 0 auto;
}
.reportPage {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 900px;
  font-size: large;
  padding: 1.2em;
  margin: 0 auto;
  border-radius: 20px;
  border-color: black;
  background-color: #d9d9d9;
  border-style: solid;
  border-width: 1px;
}

内容的提问来源于stack exchange，提问作者CJ Garcia