Te sugerimos que revises esta resolución en un entorno controlado antes de pasarlo a producción, un saludo.
Solución:
Esta puede no ser la respuesta perfecta, pero aún funciona.
$("#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);
);
He actualizado el código. Ahora funciona con varias páginas y cortes más precisos sin que se produzca un fondo negro al final de la imagen recortada.
Código
$('#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();
);
);
Te mostramos comentarios y valoraciones
Recuerda algo, que tienes la capacidad de añadir una estimación acertada si topaste tu conflicto justo a tiempo.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)