我一直在尝试使用两个流行的插件 JSPDF 和 HTML2Canvas 来将HTML页面转换并生成PDF,并通过页面上的按钮点击自动生成并强制下载页面的PDF。目前一切都工作正常,但是生成的PDF总是模糊不清且质量不高。这是我的JavaScript代码:
function CreatePDFfromHTML() {
var HTML_Width = $(".html-content").width();
var HTML_Height = $(".html-content").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($(".html-content")[0]).then(function (canvas) {
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
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("invoice_<?php echo $trackingNumber ;?>.pdf");
$(".html-content").hide();
});
}
如何调整代码,使html2canvas将页面转换为更高质量的图像(去除模糊并使生成的PDF文件更好)?