jsPDF - 如何生成所有页面为A4大小的PDF

Question

我正在使用 jsPDF 库从一个 HTML div 中创建一个多页 PDF 并下载。我希望 PDF 是 A4 尺寸。

我遇到了以下问题：

1. 只有第一页是 A4 尺寸，其他页面不是 A4 尺寸（页面更宽）。
2. 即使第一页似乎是 A4 尺寸；它也不适合容器（来自右侧的内容从容器中裁剪掉）。
3. 预期出现在第二页的内容未出现在生成的PDF中。

以下是 JS 代码:

var HTML_Width = $("#cdpage").width();
var HTML_Height = $("#cdpage").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width+(top_left_margin*2);
var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
                 
var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
               
html2canvas($("#cdpage")[0],{allowTaint:true}).then(function(canvas) {
  canvas.getContext('2d');
       
  var imgData = canvas.toDataURL("image/jpeg", 1.0);
  var pdf = new jsPDF("p", "pt", "a4");
  pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
       
  for (var i = 1; i <= totalPDFPages; i++) { 
    pdf.addPage(PDF_Width, PDF_Height);
    pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
  }
   
  pdf.save("HTML-Document.pdf");
}

我知道这段代码 var pdf = new jsPDF("p", "pt", "a4"); 是用于设置A4纸张大小的，但它没有起作用。

下面是生成pdf的HTML DIV。

<div id="cdpage">
   <div id="cdpage1"></div>
   <div id="cdpage4"></div>
   <div id="cdpage5"></div>
</div>

- anees ma kader

Answer 1

尝试使用特定的A4纸张大小

var pdf = new jsPDF('p','mm',[297, 210]);

还可以参考这个页面 如何使用jsPDF将图像设置为适应页面宽度？

- Moufeed Juboqji

---

嗨@moufed，我已经尝试过了。正如问题所述，它似乎对文档的第一页起作用，因为PDF的第一页大小似乎是A4（即使HTML内容从右侧被切割了）。但其他页面不是这样，PDF页面大小比第一页更宽。 - anees ma kader

Answer 2

在

pdf.addImage(pdfEle.pageData, 'JPEG', 0, posYInCurrentPage, pdfW, imgHeight)

"posYInCurrentPage"你应该设置为以下内容：

1. 当前页面的第一个元素，posYInCurrentPage = 0
2. 当前页面的第二个元素，posYInCurrentPage = 第一个元素的高度

- crab

---

请使用代码格式化： - Skodsgn