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

a0zr77ik  于 2022-11-20  发布在  其他
关注(0)|答案(2)|浏览(724)

我正在使用jsPDF库下载一个多页PDF,它从一个HTMLdiv创建。我想在A4大小的PDF
我面临以下问题:
1.只有第一页似乎是A4大小,其他页面不是A4大小(更宽的页面)。
1.即使是第一页似乎是在A4大小;它不适合容器(右侧的内容物从容器切掉)。
1.并且预期在第二页中出现的内容不在生成的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的HTMLDIV

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

j9per5c41#

尝试使用特定大小的a4

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

另请参阅本页How to set image to fit width of the page using jsPDF?

wh6knrhe

wh6knrhe2#

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

“posYInCurrentPage”,您应该将其设置为以下格式:-
1.当前页面中的第一个元素,posYInCurrentPage = 0
1.当前页中第二个元素posYInCurrentPage = first element Height

相关问题