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

Question

我正在使用 jsPDF 库下载从 HTML div 创建的多页 PDF。我想要 A4 大小的 PDF。

我面临以下问题，

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>

Answer 1

尝试使用特定大小的a4

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

另见本页 How to set image to fit width of the page using jsPDF?