multipage - multiple - jsPDF PDF multipágina con renderizador HTML
jspdf documentation (9)
A continuación se encuentra mi código, pero el problema es que el documento no se divide para mostrar la otra parte del documento en una página nueva.
Por favor, mejorar este código.
<script type=''text/javascript''>
$(document).on("click", "#btnExportToPDF", function () {
var table1 =
tableToJson($(''#table1'')[0]),
cellWidth =42,
rowCount = 0,
cellContents,
leftMargin = 2,
topMargin = 12,
topMarginTable =5,
headerRowHeight = 13,
rowHeight = 12,
l = {
orientation: ''p'',
unit: ''mm'',
format: ''a3'',
compress: true,
fontSize: 11,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l,''pt'', ''letter'');
doc.setProperties({
title: ''Test PDF Document'',
subject: ''This is the subject'',
author: ''author'',
keywords: ''generated, javascript, web 2.0, ajax'',
creator: ''author''
});
doc.cellInitialize();
$.each(table1, function (i, row)
{
rowCount++;
$.each(row, function (j, cellContent) {
if (rowCount == 1) {
doc.margins = 1;
doc.setFont("Times New Roman");
doc.setFontType("bold");
doc.setFontSize(11);
doc.cell(leftMargin, topMargin, cellWidth, headerRowHeight, cellContent, i)
}
else if (rowCount == 2) {
doc.margins = 1;
doc.setFont("Times ");
doc.setFontType("normal");
// or for normal font type use ------ doc.setFontType("normal");
doc.setFontSize(11);
doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i);
}
else {
doc.margins = 1;
doc.setFont("Times ");
doc.setFontType("normal ");
doc.setFontSize(11);
doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i);
// 1st=left margin 2nd parameter=top margin, 3rd=row cell width 4th=Row height
}
})
})
doc.save(''sample Report.pdf'');
});
function tableToJson(table) {
var data = [];
// first row needs to be headers
var headers = [];
for (var i=0; i<table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'''');
}
// go through cells
for (var i=1; i<table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
}
data.push(rowData);
}
return data;
}
</script>
Estoy usando jsPDF en mi sitio para generar archivos PDF. Pero ahora tengo varios DIV para imprimir en un solo PDF. que puede tomar de 2 a 3 páginas.
Por ejemplo:
<div id="part1">
content
</div>
<div id="part2">
content
</div>
<div id="part2">
content
</div>
mi código JS
- Esto funciona pero no como lo esperaba. Agrega una parte del contenido (que no se puede incluir en más de una página).
- Elimina etiquetas html como br, h1 etc.
function formtoPDF() {
jsPDF.API.mymethod = function() {
// ''this'' will be ref to internal API object. see jsPDF source
// , so you can refer to built-in methods like so:
// this.line(....)
// this.text(....)
};
var doc = new jsPDF();
doc.mymethod();
var pdfPart1 = jQuery(''#genPDFpart1'');
var pdfPart2 = jQuery(".ltinerary");
var pdfPart3 = jQuery("#domElementHTML");
var specialElementHandlers = {
''#loadVar'': function(element, renderer) {
return true;
}
};
doc.fromHTML(pdfPart1.html() + pdfPart3.html() + pdfPart3.html(), 15, 15, {
''width'': 170,
''elementHandlers'': specialElementHandlers
});
doc.output(''save'', ''Download.pdf'');
}
¿Puedo tener una solución para esto? Gracias de antemano amigos.
Automáticamente no se dividen los datos en múltiples páginas. Usted puede dividir manualmente.
Si su (rowCount * rowHeight)> 420mm (A3 Altura en mm) agregue una nueva función de página. (Lo siento, no puedo editar su código sin ejecutar) Después de agregar una nueva página leftMargin, topMargin = 0; (comienza de nuevo) Agregué código de ejemplo con el tuyo. Espero que esté bien.
else {
doc.margins = 1;
doc.setFont("Times ");
doc.setFontType("normal ");
doc.setFontSize(11);
if ( rowCount * rowHeight > 420 ) {
doc.addPage();
rowCount = 3; // skip 1 and 2 above
} else {
// now rowcount = 3 ( top of new page for 3 )
// j is your x axis cell index ( j start from 0 on $.each function ) or you can add cellCount like rowCount and replace with
// rowcount is your y axis cell index
left = ( ( j ) * ( cellWidth + leftMargin );
top = ( ( rowcount - 3 ) * ( rowHeight + topMargin );
doc.cell( leftMargin, top, cellWidth, rowHeight, cellContent, i);
// 1st=left margin 2nd parameter=top margin, 3rd=row cell width 4th=Row height
}
}
Puede convertir html directamente a pdf sin pérdida. Video de Youtube para html => ejemplo de pdf
Encontré la solución en esta página: https://github.com/MrRio/jsPDF/issues/434 Del usuario: wangzhixuan
Copio la solución aquí: // supongo que tu imagen ya está en un lienzo
var imgData = canvas.toDataURL(''image/png'');
/*
Here are the numbers (paper width and height) that I found to work.
It still creates a little overlap part between the pages, but good enough for me.
if you can find an official number from jsPDF, use them.
*/
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF(''p'', ''mm'');
var position = 0;
doc.addImage(imgData, ''PNG'', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, ''PNG'', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save( ''file.pdf'');
Esta es mi primera publicación que admite solo una página http://www.techumber.com/html-to-pdf-conversion-using-javascript/
Ahora, el segundo soportará las múltiples páginas. http://www.techumber.com/how-to-convert-html-to-pdf-using-javascript-multipage/
Este es un ejemplo que utiliza html2canvas y jspdf, aunque no importa cómo genere el lienzo, solo usaremos la altura de ese punto como punto de interrupción en un for loop , en el que se crea una nueva página y se agrega contenido. eso.
Después del bucle for, se guarda el pdf.
function makePDF() {
var quotes = document.getElementById(''container-fluid'');
html2canvas(quotes, {
onrendered: function(canvas) {
//! MAKE YOUR PDF
var pdf = new jsPDF(''p'', ''pt'', ''letter'');
for (var i = 0; i <= quotes.clientHeight/980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 980*i; // start 980 pixels down for every new page
var sWidth = 900;
var sHeight = 980;
var dX = 0;
var dY = 0;
var dWidth = 900;
var dHeight = 980;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute(''width'', 900);
onePageCanvas.setAttribute(''height'', 980);
var ctx = onePageCanvas.getContext(''2d'');
// details on this usage of this function:
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);
// document.body.appendChild(canvas);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;
//! If we''re on anything other than the first page,
// add another page
if (i > 0) {
pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
}
//! now we declare that we''re working on that page
pdf.setPage(i+1);
//! now we add content to that page!
pdf.addImage(canvasDataURL, ''PNG'', 20, 40, (width*.62), (height*.62));
}
//! after the for loop is finished running, we save the pdf.
pdf.save(''Test.pdf'');
}
});
}
Puede usar el complemento html2canvas y jsPDF ambos. Orden de proceso: html a png y png a pdf
Código de ejemplo:
jQuery(''#part1'').html2canvas({
onrendered: function( canvas ) {
var img1 = canvas.toDataURL(''image/png'');
}
});
jQuery(''#part2'').html2canvas({
onrendered: function( canvas ) {
var img2 = canvas.toDataURL(''image/png'');
}
});
jQuery(''#part3'').html2canvas({
onrendered: function( canvas ) {
var img3 = canvas.toDataURL(''image/png'');
}
});
var doc = new jsPDF(''p'', ''mm'');
doc.addImage( img1, ''PNG'', 0, 0, 210, 297); // A4 sizes
doc.addImage( img2, ''PNG'', 0, 90, 210, 297); // img1 and img2 on first page
doc.addPage();
doc.addImage( img3, ''PNG'', 0, 0, 210, 297); // img3 on second page
doc.save("file.pdf");
Tengo el mismo problema de trabajo. Buscando en MrRio github encontré esto: https://github.com/MrRio/jsPDF/issues/101
Básicamente, debe verificar el tamaño real de la página siempre antes de agregar contenido nuevo
doc = new jsPdf();
...
pageHeight= doc.internal.pageSize.height;
// Before adding new content
y = 500 // Height position of new content
if (y >= pageHeight)
{
doc.addPage();
y = 0 // Restart height position
}
doc.text(x, y, "value");
html2canvas(element[0], {
onrendered: function (canvas) {
pages = Math.ceil(element[0].clientHeight / 1450);
for (i = 0; i <= pages; i += 1) {
if (i > 0) {
pdf.addPage();
}
srcImg = canvas;
sX = 0;
sY = 1450 * i;
sWidth = 1100;
sHeight = 1450;
dX = 0;
dY = 0;
dWidth = 1100;
dHeight = 1450;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute(''width'', 1100);
onePageCanvas.setAttribute(''height'', 1450);
ctx = onePageCanvas.getContext(''2d'');
ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);
canvasDataURL = onePageCanvas.toDataURL("image/png");
width = onePageCanvas.width;
height = onePageCanvas.clientHeight;
pdf.setPage(i + 1);
pdf.addImage(canvasDataURL, ''PNG'', 35, 30, (width * 0.5), (height * 0.5));
}
pdf.save(''testfilename.pdf'');
}
});
$( document ).ready(function() {
$(''#cmd'').click(function() {
var options = {
pagesplit: true //include this in your code
};
var pdf = new jsPDF(''p'', ''pt'', ''a4'');
pdf.addHTML($("#pdfContent"), 15, 15, options, function() {
pdf.save(''Menu.pdf'');
});
});
});