我正在使用 jsPDF
库从一个 HTML
div
中创建一个多页 PDF
并下载。我希望 PDF
是 A4
尺寸。
我遇到了以下问题:
- 只有第一页是 A4 尺寸,其他页面不是 A4 尺寸(页面更宽)。
- 即使第一页似乎是 A4 尺寸;它也不适合容器(来自右侧的内容从容器中裁剪掉)。
- 预期出现在第二页的内容未出现在生成的
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>