jsPDFを使用してPDF）で2ページに画像を表示するにはどうすればよいですか？
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の2ページに配置したいと思います。これを解決するのを手伝ってください。
これは完璧な答えではないかもしれませんが、それでも機能します
$("#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);
}
});
});
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);
}
});
コードを更新しました。トリミングされた画像の最後に黒い背景が発生することなく、複数のページとより正確なカットで機能するようになりました。
コード
$('#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');
}
});
};
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");