Javascript 如何使用jsPDF以PDF格式在两页中显示图像？
我有一个html页面。其中有一个按钮，每当我点击这个按钮时，它都会使用html2canvas将整个html页面转换为数据图像，并使用jsPDF库将其放入PDF。 我使用的javascript是Javascript 如何使用jsPDF以PDF格式在两页中显示图像？,javascript,jquery,pdf,html2canvas,jspdf,Javascript,Jquery,Pdf,Html2canvas,Jspdf,我有一个html页面。其中有一个按钮，每当我点击这个按钮时，它都会使用html2canvas将整个html页面转换为数据图像，并使用jsPDF库将其放入PDF。 我使用的javascript是 $("#printButton").click(function(){ html2canvas([document.getElementById('form1')], { onrendered: function (canvas) { var imageData =
$("#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');
}
});
});
请帮我解决这个问题。要在多个页面上放置一个长图像，我得出如下结论：
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;
var img=newimage（）；
img.onload=函数（）{
while（裁剪位置<图像高度）{
var-sourceX=0；
var sourceY=裁剪位置；
var sourceWidth=image.width；
var sourceHeight=maxHeight；
var leftToCropHeight=image.height-裁剪位置；
if（leftToCropHeight我基本上得到了一个带有dataURL（裁剪图像）的对象数组。这可能不是完美的答案，但仍然有效
$("#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);
}
});
});
$（“#btnSaveAsPDF”）。单击（函数（）{
html2canvas（$（“#tblSaveAsPdf_canvas”）{
onrendered：函数（画布）{
var imageData=canvas.toDataURL（“image/jpeg”）；
var image=新图像（）；
image=Canvas2Image.convertToJPEG（画布）；
var doc=new jsPDF（）；
文件addImage（图像数据，'JPEG'，12,10）；
变量cropingyposition=1095；
计数=（图像高度）/1095；
对于（变量i=1；i$（'pdf'）。在（'click'，function（）上{
html2canvas（document.body{
onpreload:function（）{
$（“#barra”）.hide（）；
},
onrendered：函数（画布）{
$（“#页”）.hide（）；
var imgData=canvas.toDataURL（'image/jpeg'）；
选项={
方向：“0”，
单位：毫米，
格式：“a4”
};
var doc=新的jsPDF（选项，''，''）；
addImage文件（imgData，'jpeg'，10,10,190,0）；
var corte=1620；//配置tamanho do corte
var image=新图像（）；
image=Canvas2Image.convertToJPEG（画布）；
var cropingyposition=corte；
变量计数=（image.height）/corte；
对于（变量i=1；i$('#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();
}
});
});
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);
}
});
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");