如何使用jsPDF以PDF格式显示两页图像？
我有一个HTML页面。 我有一个按钮，当我单击此按钮时，它将使用html2canvas将整个html页面转换为数据图像，并使用jsPDF库将其放入PDF。 我正在使用的javascript是
$("#printButton").click(function(){ html2canvas([document.getElementById('form1')], { onrendered: function (canvas) { var imageData = canvas.toDataURL('image/jpeg',1.0); var doc = new jsPDF('landscape'); doc.addImage(imageData,'JPEG',5,20,200,150); doc.save('Test.pdf'); } }); }); 它仅在第一页显示图像。 但每当html页面大小更多时，我想剪切图像数据并将其放在PDF格式的两页中。 请帮我解决这个问题。
这可能不是完美的答案，但仍然有效
$("#btnSaveAsPDF").click(function () { html2canvas($("#tblSaveAsPdf_canvas"), { onrendered: function (canvas) { var imageData = canvas.toDataURL("image/jpeg"); var image = new Image(); image = Canvas2Image.convertToJPEG(canvas); var doc = new jsPDF(); doc.addImage(imageData, 'JPEG', 12, 10); var croppingYPosition = 1095; count = (image.height) / 1095; for (var i =1; i < count; i++) { doc.addPage(); var sourceX = 0; var sourceY = croppingYPosition; var sourceWidth = image.width; var sourceHeight = 1095; var destWidth = sourceWidth; var destHeight = sourceHeight; var destX = 0; var destY = 0; var canvas1 = document.createElement('canvas'); canvas1.setAttribute('height', destHeight); canvas1.setAttribute('width', destWidth); var ctx = canvas1.getContext("2d"); ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); var image2 = new Image(); image2 = Canvas2Image.convertToJPEG(canvas1); image2Data = image2.src; doc.addImage(image2Data, 'JPEG', 12, 10); croppingYPosition += destHeight; } var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""); filename = 'report_' + d + '.pdf'; doc.save(filename); } }); });
我已经更新了代码。 现在可以处理多个页面和更精确的剪切，而不会在裁剪图像的末尾出现黑色背景。
码
$('#pdf').on('click', function(){ html2canvas(document.body, { onpreloaded: function(){ $("#barra").hide(); }, onrendered: function(canvas) { $("#page").hide(); var imgData = canvas.toDataURL('image/jpeg'); options = { orientation: "0", unit: "mm", format: "a4" }; var doc = new jsPDF(options, '', '', ''); doc.addImage(imgData, 'jpeg', 10, 10, 190, 0); var corte = 1620; // configura tamanho do corte var image = new Image(); image = Canvas2Image.convertToJPEG(canvas); var croppingYPosition = corte; var count = (image.height)/corte; for (var i =1; i < count; i++) { doc.addPage(); var sourceX = 0; var sourceY = croppingYPosition; var sourceWidth = image.width; var sourceHeight = corte; var destWidth = sourceWidth; var destHeight = sourceHeight; var destX = 0; var destY = 0; var canvas1 = canvas; canvas1.setAttribute('height', (image.height)-(corte*i)); canvas1.setAttribute('width', destWidth); var ctx = canvas1.getContext("2d"); ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); var image2 = new Image(); image2 = Canvas2Image.convertToJPEG(canvas1); image2Data = image2.src; doc.addImage(image2Data, 'JPEG', 10, 10, 190, 0); croppingYPosition += destHeight; } doc.save('sample-file.pdf'); $('canvas').remove(); $('canvas1').remove(); $("#page").show(); $("#barra").show(); } }); });
为了在多个页面上放置一个长图像，我得出了类似这样的内容：
var img = new Image(); img.onload = function(){ while (croppingYPosition < image.height) { var sourceX = 0; var sourceY = croppingYPosition; var sourceWidth = image.width; var sourceHeight = maxHeight; var leftToCropHeight = image.height - croppingYPosition; if (leftToCropHeight < maxHeight) { sourceHeight = leftToCropHeight; } var destWidth = sourceWidth; var destHeight = sourceHeight; var destX = 0; var destY = 0; var canvas = document.createElement('canvas'); canvas.setAttribute('height', destHeight); canvas.setAttribute('width', destWidth); var ctx = canvas.getContext('2d'); ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); croppedImages.push(CanvasToJPEGConversionService.toJPEG(canvas)); croppingYPosition += destHeight; } retur croppedImages; }; img.src = image.dataURL;
我基本上得到一个带有dataURL（裁剪图像）的对象数组。
我想出来这个解决方案希望这会对你有所帮助：
PDFConverter.prototype.exportToPDF = function (divID, filename, pdfHeight) { html2canvas($('#' + divID), { //Plugin:html2canvas.min.js,Takes html and convert to canvas. onrendered: function (canvas) { var doc = new jsPDF(); //Plugin:jspdf.min.js Using to export html to pdf file var HtmltoPdfPageHeight; if (pdfHeight) HtmltoPdfPageHeight = pdfHeight; var image = new Image(); image = Canvas2Image.convertToJPEG(canvas); var croppingYPosition; var count = Math.ceil((image.height) / HtmltoPdfPageHeight); for (var i = 1; i <= count; i++) { if (i == 1) croppingYPosition = 0; else doc.addPage(); var sourceX = 0; var sourceY = croppingYPosition; var croppingImageHeight = (image.height - (HtmltoPdfPageHeight * (i-1))) > HtmltoPdfPageHeight ? HtmltoPdfPageHeight : (image.height - (HtmltoPdfPageHeight * (i-1))); var destX = 0; var destY = 0; var croppedCanvas = document.createElement('canvas'); //Canvas using to resize main canvas croppedCanvas.setAttribute('height', croppingImageHeight); croppedCanvas.setAttribute('width', image.width); var ctx = croppedCanvas.getContext("2d"); ctx.drawImage(image, sourceX, //drawImage(img, startX, startY, originalW, originalH, destX, destY, destW, destH); sourceY, image.width, HtmltoPdfPageHeight, destX, destY, image.width, HtmltoPdfPageHeight); var imageToAddatPdf = new Image(); //Final image exporting in pdf page imageToAddatPdf = Canvas2Image.convertToJPEG(croppedCanvas); doc.addImage(imageToAddatPdf.src, 'JPEG', 10, 10, 185, 0); croppingYPosition += HtmltoPdfPageHeight; } doc.save(filename + '.pdf'); } }); };
html2canvas($('#wrap')[0]).then(canvas => { try { contentH = $('#wrap').height(); var img = canvas.toDataURL("image/png", 1.0); $w = $actw = canvas.width; $h = $acth = canvas.height; var pdf = new jsPDF("p", "mm", "a4"); var width = $maxw = pdf.internal.pageSize.width; var height = $maxh = pdf.internal.pageSize.height; if (!$maxw) $maxw = width; if (!$maxh) $maxh = height; if ($w > $maxw) { $w = $maxw; $h = Math.round($acth / $actw * $maxw); } pdf.addImage(img, 'JPEG', 0, 0, $w, $h); $count = Math.ceil($h) / Math.ceil($maxh); $count = Math.ceil($count); for (var i = 1; i <= $count; i++) { position = - $maxh * i alert(position); pdf.addPage(img, 'JPEG', 0, 0, $w, $h); pdf.addImage(img, 'JPEG', 0, position, $w, $h); } pdf.save("cart.pdf"); } catch (e) { alert("Error description: " + e.message); } });