Como exportar texto con fondo en PDF

En este tutorial, exploraremos cómo exportar texto con fondo en pdf utilizando la biblioteca jsPDF. Específicamente, nos enfocaremos en configurar el color de fondo de un elemento de texto. Al final de este tutorial, podrá generar archivos PDF con texto sobre un fondo de color visualmente atractivo.

Tabla de contenido:
– Requisitos previos – Configuración de jsPDF – Creación de un elemento de texto con color de fondo – Configuración del tamaño y tipo de fuente – Configurar el texto y el color de fondo – Medición del ancho del texto – Dibujar el fondo – Imprimir el texto – Generar y guardar el PDF – Creación el mismo elemento pero con doc.html(): – Conclusión

Requisitos previos:

Antes de sumergirnos en el tutorial, asegúrese de tener un conocimiento básico de JavaScript y HTML. La familiaridad con la biblioteca jsPDF también será beneficiosa. Puede encontrar la biblioteca jsPDF en .

1. HTML para el texto con fondo

Para este simple ejemplo, vamos a tener solo la informacion de un texto mas su contenedor para el fondo. Luego de esto comenzaremos con la seccion de JavaScript en la que describiremos dos formas de procesar la exportacion del texto a un documento pdf.

Para nuestro HTML, vamos a incluir el codigo debajo: En el tendremos iuna seccion en la que agregaremos un input y un boton. el input nos premitira agregar el texto que deseemos, el boton, permitira crear el documento pdf usando una evento onclick.

...
<main style="display:block; text-align:center; width:100%; height:100%;">
  <section style="display:block; margin-top:50px;">
    <input type="text" id="inpttxt" value="" />
    <button id="btnd">Crear PDF</button>
  </section>
</main>
...

2. Configuración de jsPDF

Para comenzar, vamos a incluir la biblioteca jsPDF en el proyecto justo debajo del contenido HTML, antes de la etiqueta </body>. La biblioteca se puede descargar en esta direccion: https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js. Luego vamos a incluirla localmente o usar un enlace de red de entrega de contenido (CDN) para incluirla en su archivo HTML. Aquí hay un ejemplo usando el enlace CDN:

...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
  </body>
</html>

3. Creación de un elemento de texto con color de fondo

Veamos los pasos para crear un elemento PDF con texto de color de fondo.

Lo primero sera declarar las variables, asi como crear la funcion que se va a ejecutar en el evento onclick del boton.

<script>
  var btn = document-getElementById("btnd"),
      inptTxt = docuemnt.getElementById("inpttxt");

  btn.onclick = function() {
     //Obten el valor del input
     inpTxt = inpTxt.value;
     //declarar la variable objeto para el pdf
     var doc = new jsPDF('p', 'pt', 'letter'),
         margin = 10,
         rectWidth = doc.getTextWidth(inpTxt);
     //Codigo Aqui
    ...
  };

En el codigo de arriba, hemos creado la parte inicial para el codigo javascript. En el declaramos dos variables; btn para acceder al boton, y inpTxt para obtener acceso a la casilla de texto. En la siguiente linea, vamos a agregarle un evento onclick al boton, y vamos crear una function que se ejecutara cuando accionemos el boton con el proposito de exportar el texto con fondo a un fichero pdf.

En nuestra funcion, vamos a guardar el valor del texto en la variable inpTxt. Luego vamos a declarar la variable doc como un objeto de jsPDF con las opciones ‘p‘ para portrait o vertival, ‘pt‘ para medidas del papel en puntos, y ‘letter‘, para configurar el papel a tipo carta. Tambien declararemos un margen para el papel, y un ancho de rectangulo ‘rectWidth‘ para guardar el ancho del texto.

Para garantizar que el color de fondo cubra solo el texto, debemos medir el ancho del texto. Utiliza el método getTextWidth() proporcionado por jsPDF para obtener el ancho del texto.

3.1 Configuración del tamaño y tipo de fuente

Antes de crear el elemento, tenemos que establecer el tamaño y el tipo de fuente deseados. Podemos usar los métodos setFontSize() y setFont() proporcionados por jsPDF. Para nuestro ejemplo, setearemos la fuente a ‘Arial‘ con un tamaño ‘12‘.

// Configura el tamaño y el tipo  de fuente 
doc.setFontSize(12); 
doc.setFont("Arial");

3.2 Configuración del color de fondo:

A continuación, definiremos el color de fondo del elemento. Elije un color que proporcione suficiente contraste con el texto.

// Configura el color de fondo en orden. Primero define el color del fondo
doc.setFillColor('Red');

3.3 Dibujar el fondo:

Para dibujar el fondo, establezca el color de relleno usando el método setFillColor() y luego use el método rect() para dibujar un rectángulo con las dimensiones deseadas.

// Luego Dibujamos el fondo usando el margen, el texto, y el ancho del texto. Primera opcion es un rectangulo simple, el segundo es un rectangulo con puntas redondeadas.
//rectangulo simple
doc.rect(10, 10, textWidth, 12, "F");

Fondo con punta redondeada


//rectangulo con puntas redondeadas
doc.roundedRect(margin + 20, margin, rectWidth * 2, 50, 10, 10, 'F');

3.4 Imprimir el texto:

Finalmente, configure el color del texto para asegurarse de que sea visible en la parte superior del fondo y use el método text() para imprimir el texto dentro del rectángulo. Aquí hay un ejemplo:

// Set the text color
doc.setTextColor(0, 0, 0);

// Print the text
doc.text(inpTxt, margin + 25, margin + (50/2), {align: 'left', baseline: 'middle'});

3.6 Generando el PDF

Para finalmente generar el documento en pdf, usaremos la opcion save(). Esta opcion permite descargar el fichero convertido en un documento pdf. Asi que lo siguiente es agregar doc.save() al codigo.

// Save the PDF
doc.output("dataurlnewwindow", "pdf-file");

Con esto, podemos ya exportar texto con fondo en pdf. Ahora veremos otra forma de exportar el mismo contenido, pero usando la opcion html().

Resultado usando un fondo simple

resultado texto con fondo usando jspdf solamente.

Con fondo redondeado3

exportar texto con fondo y puntas redondeadas

4. Creación el mismo elemento pero con doc.html()

Otra forma de generar el mismo pdf es utilizando la opcion de doc.html(). Para usar la opcion de html(), vamo modificar el evento onclick. Ademas, vamos agregar otra seccion de html para este proposito.

Lo primero sera agregar una nueva sccion al html con id para poderlo llamar desde javascript. Esta seccion previsualizara el html final para luego exportar el texto con fondo a color.

...
<main style="display:block; text-align:center; width:100%; height:100%;">
  <section style="display:block; margin-top:50px;">
    <input type="text" id="inpttxt" value="" />
    <button id="btnd">Crear PDF</button>
  </section>
  <section id="final"></section>
</main>
...

Luego agregaremos la libreria html2canvas. dew la misma manera que agregamos la libreria jsPDF

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"><script>

Ahora que tenemos esto, vamos a declarar la variable para poder acceder a la seccion. Para esto declararemos una variable ‘final‘ y le asignamos el id de la seccion que acabamos de crear.

<script>
  var btn = document-getElementById("btnd"),
      inptTxt = docuemnt.getElementById("inpttxt"),
      final = document.getElementById("final");
...

En el evento onclick, vamos a mantener la primera parte intacta. y vamos a modificar la parte que configura el contenido del pdf.

...
btn.onclick = function() {
     //Obten el valor del input
     inpTxt = inpTxt.value;
     //declarar la variable objeto para el pdf
     var doc = new jsPDF('p', 'pt', 'letter'),
         margin = 10,
         rectWidth = doc.getTextWidth(inpTxt);
     //Codigo Aqui
    ...

Ahora vamos a generar el HTML con el texto, para luego generar el pdf. Para esto creamos un elemneto div y le agregamos el contenido de texto. Ya que estamos creando todo directamente en HTML, la configuracion del texto con fondo va a ser mas sencillo. Solo debemos hacerlo usando HTML y CSS.

Siguiendo desde donde quedamos en el codigo anterior, continuamos:

...
contentresult = document.createElement("div");
contentresult.innerHTML = '<h1>Titulo</h1><p style="font-size:18px; background:grey; width:fit-content; padding:0 10px;">' + inpTxt + '</p>';

Como pueden ver, es mas sencillo ya que el estilo se encarga de todo en la pagina, lo cual te da mas libertad para diseñar tanto como desees. Ahora vamos a crear una condicion, que me va a permitir chequear si la seccion final esta vacia o no. Con esto, si esta vacia, sin contenido, presentaremos el resultado, en caso de que ya se halla presentado el contenido, lo limpiamos y volvemos a presentar el contenido.

...
if(final == ''){
  final.appendChild(contentresult);
} else {
  final.innerHTML = '';
  final.appendChild(contentresult);
}
...

Ya con esto podemos generar el pdf y exportarlo. Para hacerlo, llamamos a html(), le agregamos la variable final con el contenido ya agregado, le damos el margen a la pagina, y llamamos a la funcion para exportar el texto con fondo ya hecho con HTML.

// Save the PDF
doc.html(final, {
  x: margin,
  y: margin,
  callback: function(doc){
    doc.output('dataurlnewwindow', nuevopdf.pdf);
  }
});

Resultado

5. Conclusion:

¡Felicidades! Haz aprendido a crear elementos PDF personalizados con texto de color de fondo utilizando jsPDF. Ahora puede aplicar este conocimiento para mejorar sus capacidades de generación de PDF y crear documentos visualmente atractivos.

Recuerde experimentar con diferentes estilos de fuente, tamaños y colores para lograr el efecto visual deseado. Siéntase libre de explorar otras características y funcionalidades proporcionadas por la biblioteca jsPDF para personalizar aún más sus documentos PDF.

Happy coding!