我有一个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格式的两页中。 请帮我解决这个问题。
答案 0 :(得分：6)
这可能不是完美的答案，但仍有效
$("#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);
}
});
});
答案 1 :(得分：4)
我已经更新了代码。现在可以处理多个页面和更精确的剪切，而不会在裁剪图像的末尾出现黑色背景。
代码
$('#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();
}
});
});
答案 2 :(得分：3)
要在多个页面上放置一个长图像，我出现了类似的内容：
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（裁剪图像）的对象数组。
答案 3 :(得分：3)
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);
}
});
答案 4 :(得分：1)
我想出了这个解决方案希望这会对你有所帮助：
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');
}
});
};
答案 5 :(得分：0)
var pdf = new jsPDF();
pdf.addImage(image1, 'JPEG', 10, 10);
pdf.addImage(image2, 'JPEG', 10, 90);
pdf.addImage(image3, 'JPEG', 10, 170)
pdf.addPage();
pdf.addImage(image4, 'JPEG', 10, 10)
pdf.addImage(image5, 'JPEG', 10, 140)
pdf.save("download.pdf");