Hola, este tutorial sera mas sencillo pues vamos a solo agregar un poco de código al tutorial de Como exportar una imagen a pdf usando JavaScript. Aqui vamos a continuar exportando html a paginas pdf usando javascript, pero esta vez veremos la posibilidad de agregar contenido en una segunda pagina dentro del mismo documento pdf.
Agregando un area de texto <textarea>
Lo primero que vamos a hacer, es abrir el documento que utilizamos anteriormente para agregar una image al pdf, y le agregaremos un contenedor compuesto por un titulo y un area de texto. Ademas le agregaremos un id tanto al titulo como al campo de texto para poderlos llamar mas tarde cuando agreguemos el código JavaScript.
<div style="margin: 15px auto;">
<h1 id="bigtitle">Titulo de la segunda pagina</h1>
<textarea name="texto" id="cntxt" cols="30" rows="10" placeholder="contenido de la segunda pagina"></textarea>
</div>Con este código veremos un campo de texto así como un titulo.
Comenzar el Script para terminar exportando HTML a PDF
Ya con el contenido html agregado, vamos a incluirlo en el código JavaScript para generar el pdf.
El código va ser bastante simple. Vamos a declarar las variables para el titulo y para el area de texto. Luego, dentro de la función que genera el documento pdf, agregaremos el código necesario para que el nuevo contenido sea incluido en el documento. Aquí les dejos el código.
Declaramos las variables.
var inpimg = bigtitle = document.getElementById('bigtitle').innerText,
cntxt = document.getElementById('cntxt');Ahora que tenemos las variables, vamos a agregar la informacion a la función que va a tener el boton. Nos vamos a la linea que comienza la función del botón «btnpdfout.onclick = function(){» y, debajo de la linea doc.addImage agregaremos la acción de agregar una nueva pagina y luego llenaremos la pagina con el nuevo contenido.
doc.addPage('letter', 'p');
doc.setFontSize(18);
doc.setFontStyle('bold');
doc.text(bigtitle, 25, 45);
doc.setFontSize(14);
doc.setFontStyle('normal');
doc.text(cntxt.value, 25, 65);Ya con esto podemos abrir la pagina y comenzar a agregar contenido para luego exportar nuestro documento html a pdf con este javascript generando una nueva pagina.
Espero les haya gustado y si tienen algún comentario, no duden en dejarme algunas lineas.
Chao.