jsPDF 在操作系统之间的呈现方式不同

Question

我正在 Linux 上的 Angular 项目中工作，jsPDF 库运行得很好。这里导出的 PDF 正是我想要/期望发生的：

然后，我在 Windows 和 Mac 上启动了相同的代码，结果发现导出的结果设置为预期值的 200% 左右，如下所示：

我花了很多时间调整缩放比例，在最终结果中添加了缩放比例，甚至让第一页看起来正确，但随后第二页开始从第一页的中间点开始被剪切。更不用说这个修复在 Linux 机器上看起来很糟糕了。

对于为什么机器之间的渲染可能不同有什么见解吗？还有其他人遇到过这个问题吗？这是一个已知的错误吗？当阅读有关这个图书馆的内容时，我是否想到了什么？

这是我的

genreateReport.ts

文件中导出PDF功能的相关代码：

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

// hard coded for this question
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;
}

Answer 1

我遇到了完全相同的问题。我使用

addImage

添加了带有 x 和 y 位置的图像，但是结果因操作系统（windows/mac）而异。

我搜索了包括 github 问题在内的答案，但找不到。

这个问题有进展吗？