CSS, Desarrollo Web, Frontend, HTML, JavaScript

Convierte pagina HTML y CSS a PDF

Publicado elAutorThe Digital Mike

Hola, en este tutorial les traigo como se convierte una pagina HTML y CSS a PDF. Para esto vamos aprender como exportar un formulario con estilo al formato pdf usando la librería jspdf y html-to-canvas. El proceso es bastante simple y no requiere de mucho código por lo que este tutorial será bastante fácil de realizar.

Como crear una pagina HTML

Para comenzar con la creacion de la pagina, empezaremos con el documento index.html que contendra el guion mas el boton que convierte la pagina HTML y CSS a PDF. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

Creando un Formulario para el Guion de tu Video

En este segmento de código HTML, crearemos un formulario que permitira estructurar y planificar el contenido de tu video. Este formulario es especialmente útil si estás trabajando en la creación de un guion para un video en línea. Echemos un vistazo a las partes clave de este formulario (la seccion entera esta escrita en negrita, la explicacion la veran debajo del codigo):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guion de Youtube</title>
</head>
<body>
<section>		
		<div class="contentinput">
			<div class="headerbar">
				<h1>Guion Para Video | Video Guide</h1>
			</div>
			<p class="blocktxt">
				<label>
					<span>Titulo:</span></label></p><hr>
					<input type="text" name="guiontitulo" id="guiontitulo" placeholder="Agrega un titulo" style="background-color: white;">
				
			<p></p>
			<p class="blocktxt">
				<label>
					<span>Cabecera:</span></label></p><hr>
					<textarea name="cabecera" id="cabecera" cols="30" rows="5" placeholder="describe el comienzo de tu video en texto, incluye el titulo, y/o el indice de contenidos. Dureacion 10 a 20 segundos" style="background-color: white;"></textarea>
				
			<p></p>
        	<p class="blocktxt">
				<label>
					<span>Introduccion:</span></label></p><hr>
					<textarea name="introduccion" id="introduccion" cols="30" rows="5" placeholder="crea tu introduccion con duracion de no mas de un minuto" style="background-color: white;"></textarea>
				
			<p></p>
			<p class="blocktxt"><span>Desarrollo</span></p><hr>
				<label>
					<input type="text" name="tema" id="tema" placeholder="titulo del tema" style="background-color: white;"><br>
					<textarea name="temacont" id="temacont" cols="30" rows="5" placeholder="contenido del tema a hablar en 2 minutos" style="background-color: white;"></textarea>
				</label>
			<p></p>
			<p class="blocktxt">
				<label>
					<span>Despedida o Cierre:</span> </label></p><hr>
					<textarea name="despedida" id="despedida" cols="30" rows="5" placeholder="despide a tu audiencia en un minuto" style="background-color: white;"></textarea>
				
			<p></p>
        	<p class="blocktxt">
				<label>
					<span>Final</span> </label></p><hr>
					<textarea name="final" id="final" cols="30" rows="5" placeholder="agrega tu final mas videos recomendados no mas de 30 segundos" style="background-color: white;"></textarea>
				
			<p></p>
		</div>
		<div>			
        	<p>
				<button class="butn" id="myguionpdf">Ver PDF</button>
			</p>
		</div>		
	</section>
</body>
</html>
  • Título del Video: El primer campo «Titulo» te permite ingresar el título de tu video. Esto es esencial para identificar de qué trata tu video.
  • Cabecera: El campo «Cabecera» es donde puedes describir el comienzo de tu video en texto. Esto incluye detalles como el título del video y un índice de contenidos. También puedes especificar la duración prevista, que generalmente debe ser de 10 a 20 segundos.
  • Introducción: Aquí puedes crear la introducción de tu video. Esta sección debe tener una duración de no más de un minuto y es crucial para enganchar a tu audiencia desde el principio.
  • Desarrollo del Contenido: En esta sección, puedes agregar los diferentes temas o secciones que se tratarán en tu video. Para cada tema, puedes ingresar un título y describir el contenido que planeas cubrir en aproximadamente dos minutos.
  • Despedida o Cierre: La sección de «Despedida o Cierre» es donde puedes planificar cómo te despedirás de tu audiencia. Esto generalmente debe durar alrededor de un minuto.
  • Final y Videos Recomendados: Aquí, puedes agregar el contenido final de tu video, así como cualquier contenido relacionado o videos recomendados. Esta parte no debe superar los 30 segundos.
  • Ver PDF: Al hacer clic en el botón «Ver PDF», podrás generar un documento PDF que contendrá toda la estructura y planificación de tu video, lo que facilitará su revisión y seguimiento.

Agregando la ventana modal para previsualizar el guion HTML

Además del formulario de planificación del guion del video, hemos incorporado una función adicional que te permite previsualizar el documento final antes de exportarlo a un formato PDF. Esto es especialmente útil para asegurarte de que la estructura de tu video esté de acuerdo con tus expectativas. A continuación, te presento el codigo y te explico las partes clave de esta función:

...
</section>
<section>
<div class="mastercards" id="mastermodal">
			<div class="cardscont">
				<div class="card-header">
					header
					<span class="close">×</span>
				</div>
				<div class="card-body">
					<div class="yg-slidecont" id="ygSliderCont">
						
					</div>					
				</div>
				<div class="card-footer">
					<a class="yg-pdfdowload" id="ygdw">⤓</a>
				</div>
			</div>
		</div>
</section>
...
  • Modal de Previsualización: En este bloque de código, hemos creado un «modal» que actúa como una ventana emergente. Este modal se utiliza para mostrar una vista previa del documento final antes de exportarlo como un PDF.
  • Cabecera del Modal: La sección «header» dentro del modal proporciona una pequeña cabecera que podría incluir un título o una descripción. Esto te permite dar contexto a lo que se muestra en el modal.
  • Botón de Cierre: Notarás un pequeño botón con una «X» que se utiliza para cerrar el modal cuando hayas terminado de previsualizar el contenido.
  • Cuerpo del Modal: En la sección «card-body,» es donde se mostrará la vista previa del documento final. Esto es especialmente útil para asegurarte de que la estructura y el contenido del guion del video sean como los has planeado.
  • Botón de Descarga: En la parte inferior del modal, encontrarás un botón con la clase «yg-pdfdowload» que te permite descargar la vista previa como documento pdf.

Donde agregar los estilos y scripts a una pagina web

Para finalizar con la parte HTML, vamos a agregar las librerias jspdf y html-to-canvas,. Ademas, incluiremos el link para el estilo a usar en la pagina.

Primero agregaremos los script al final del documento:

...
<script src="scr.js"></script>
	<!-- jspdf cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.js" integrity="sha512-sk0cNQsixYVuaLJRG0a/KRJo9KBkwTDqr+/V94YrifZ6qi8+OO3iJEoHi0LvcTVv1HaBbbIvpx+MCjOuLVnwKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

Ahora incluiremos el archivo de estilo en el documento.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
...

Ya tenemos el HTML completado. Ahora vamos a crear el estilo para la pagina.

Como agregar estilo CSS a una pagina HTML?

Para darle estilo a una pagina HTML podemos usar tres opciones:

  • Agregar el estilo dentro del mismo documento HTML usando la etiqueta <style></style>. Para agregarlo, lo haremos dentro de la cabezera del documento <head>, debajo dejo un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{box-sizing: content-box;}
        html, body{padding: 0;margin: 0;}
</style>
</head>
<body>
....
  • Usar el estilo dentro de las etiquetas HTML, esto se llama «inline style«. Para esto se utiliza el atributo «style» para modificar el aspecto de la etiqueta HTML; ejemplo debajo:
<main style="display: block;text-align: center;width: 100%; height: 100%;">
        <section style="display: block;margin-top: 50px;">
        </section>
</main>
  • Estilo externo. Esta forma es mejor, ya que permite tener todo el estilo dentro de un fichero independiente. Luego este fichero es llamado dentro de la etiqueta <head> para incluir el estilo a la pagina.

style.css; en este fichero no necesitas usar la etiqueta <style>, solo el estilo.

*{box-sizing: content-box;}
html, body{padding: 0;margin: 0;}

Documento html index.html. Usamos la etiqueta <link> para incluir el estilo a la pagina.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

Esta ultima forma es la que vamos a utilizar. Asi que comenzaremos con crear el fichero style.css en la misma carpeta en donde tienen el fichero html. Luego, como mismo explicamos arriba, agregamos este fichero en la cabecera de index.html. El resultado se vera justop como el ejemplo de arriba. Ahora vamos a agregar contenido de estilo al guion. Abre el fichero style.css y comienza a crear el estilo.

*{box-sizing: border-box;}
.headerbar{background-color: purple; padding: 25px 0; text-align: center;width: 100%;}
.headerbar h1{color: aliceblue;font-size: 32px;}
input, label, textarea{margin: 5px auto;}
input, textarea{background-color: #eee;border-color: #cecece;box-shadow: #33333369 1px 1px 2px 1px;font-size: 18px; width: 100%;border-width: 0;}
.contentinput span{background-color: purple;padding: 5px 15px 5px 5px;display: block;margin: 0; color: antiquewhite; font-size: 20px;width: 100%;}
.butn{background-color: purple; color: white; padding: 5px 15px; border-radius: 3px;text-decoration: none; margin: auto; width: fit-content;display: block;transition: all .5s;cursor: pointer;}
.butn:hover{transform: scale(1.2);}


.mastercards{display: none;position: absolute; z-index: 1; left: 0; top: 50px; width: 100%; background-color: #00000021;}
.cardscont{background-color: #fefefe; margin: auto; padding: 10px;
width: 98%;border-radius: 10px;}
.close{float: right; color: #aaa;font-size: 28px;font-weight: bold;}
.close:hover, .close:focus{color: black; text-decoration: none; cursor: pointer;}
.card-header{padding: 2px 15px;background-color: purple;color: white;}
.card-body{padding: 2px 15px}
.card-footer{padding: 20px 15px; background-color: purple; color: white;position: relative;text-align: center;}


.yg-slidecont{width: 100%;}
.yg-slides{padding: 10px;display: block;}
.yg-pdfdowload{padding: 15px;cursor: pointer; padding: 5px 10px;background-color: #cecece44;border-radius: 50%;margin: 5px;font-weight: 700;}
guion para video html a pdf con css

Como previsualizar y exportar HTML usando JavaScript

Justo antes, cuando explicabamos el HTML, agregamos el script al final del documento. Ahora vamos a crear el fichero javascript que le dara vida al guion.

Como declarar variables en JavaScript

Lo primero sera crear el fichero, asi que dentro de la carpeta del proyecto, creamos un fichero script.js. Dentro de este fichero comenzaremos declarando las variables que guardaran el contenido de los inputs.


var inputIds = [document.getElementById('guiontitulo'),document.getElementById('cabecera'),document.getElementById('introduccion'), document.getElementById('tema'), document.getElementById('temacont'),document.getElementById('despedida'),document.getElementById('final')],
    bgas = [],
    ygSliderCont = document.getElementById('ygSliderCont'),
    btnpdf = document.getElementById('myguionpdf');

Aqui explicamos las variables:

  • inputIds: Esta variable es un arreglo (array) el cual va a guardar todas las IDs de los inputs. De ahi el porque esta declarado de la manera [document.getElementById(‘guiontitulo’),document.getElementById(‘cabecera’), …].
  • bgas: Este arreglo guardara el valor introducido en cada input.
  • ygSliderCont: Aqui es donde agregaremos la previsualizacion del Guion
  • btnpdf: Esta variable permitira tener acceso al boton para previsualizar el documento antes de exportarlo a PDF.

Cómo Usar forEach para Manipular Elementos de una Página Web

A continuacion, vamos a usar un bucle forEach para iterar sobre la lista de elementos de entrada que tenemos para el guion. Estos elementos de entrada representan campos de texto o áreas de entrada, como los que se muestran en el formulario anterior. Este forEach se encargara de agregar el contenido de cada input dentro de la variable bgas.


inputIds.forEach((el, indx) =>{
    el.style.backgroundColor = "white";
    el.addEventListener('change', function(){

        el.style.backgroundColor = "lightgreen";
        bgas[indx] = el.value;
    });
});

Explicación de Cada Parte:

  1. forEach Loop: El método forEach se utiliza para recorrer una matriz o una lista de elementos, en este caso, inputIds, que contiene elementos de entrada. El loop toma dos argumentos en su función de callback: el (elemento actual) y indx (índice del elemento actual).
  2. Establecer el Fondo Blanco: el.style.backgroundColor = "white" establece el fondo de cada elemento de entrada (el) en blanco cuando se carga la página. Esto se hace para asegurarse de que todos los campos de entrada tengan un aspecto inicial uniforme.
  3. EventListener para Cambios: el.addEventListener('change', function() {...}) agrega un evento ‘change’ a cada elemento de entrada. Este evento se dispara cuando el contenido del campo de entrada cambia.
  4. Cambiar el Fondo a Verde: Dentro del manejador de eventos, el.style.backgroundColor = "lightgreen" cambia el fondo del elemento de entrada (el) a verde cuando el usuario introduce texto en ese campo. Esto sirve como una indicación visual de que se ha ingresado contenido en ese campo.
  5. Almacenar Valores en un Array: bgas[indx] = el.value almacena el valor del elemento de entrada en el arreglo (bgas) en la posición correspondiente (indx). Esto es útil para capturar y retener los valores de los campos de entrada para su posterior procesamiento.

Creando el modal para previsualizar el guion HTML

Para el modal, vamos a declarar las variables para previsualizar el documento. Primero declaramos las variables, y luego le daremos un evento onclick al boton de preview. Dentro del evento onclick, usaremos un forEach para poder acceder al contenido de la variable bgas. Luego, dentro del forEach crearemos el contenido en donde presentaremos el contenido guardado en la variable bgas. Despues, agregaremos todo ese contenido dentro del cuerpo del modal.


 var modal = document.getElementById('mastermodal'),
 closebtn = document.querySelector('.close'),
 ygdw = document.getElementById('ygdw'),
 divcont;

btnpdf.onclick = function(){ 
    bgas.forEach(ex => {
        divcont = document.createElement("div");
        divcont.setAttribute("class", "yg-slides");
        divcont.innerHTML = '<p>'+ ex +'</p>';
        ygSliderCont.appendChild(divcont);
    });
    modal.style.display = "block";
}

Como cerrar una ventana modal

Para cerrar el modal, vamos a crear un evento onclick a la variable closebtn. Ademas, haremos la misma accion pero usando window.onclick, de esta ultima forma, si hacemos click fuera del modal, este se cerrara como si hubieramos tocado el boton de cerrar la ventana modal.

closebtn.onclick = function(){
    modal.style.display = "none";
    ygSliderCont.innerHTML = '';
   }
window.onclick = function(event){
    if(event.target == modal){
        modal.style.display = "none";
        divcont.innerHTML = '';
    }
   }

Cómo Crear y Generar un PDF desde la Página HTML

Finalmente vamos a generar el pdf con el contenido del guion. En este fragmento de código, se utilizar la biblioteca jsPDF para crear un documento PDF a partir del contenido de los inputs de la página web. Aquí está la explicación detallada del código:

En la parte donde declaramos las variables de la ventana modal, creamos una variable para el boton llamada ygdw. A esta variable le vamos a agregar un evento onclick lo que permitira la generacion del pdf final. Debajo les presento el codigo.


 ygdw.onclick= function(){
    
     var doc = new jsPDF('p', 'pt', 'letter');
     var margin = 10;
     var scale = (doc.internal.pageSize.width - margin * 2) / document.body.clientWidth;
     var scale_mobile = (doc.internal.pageSize.width - margin * 2) / document.body.getBoundingClientRect();
     var contentweb = document.querySelector('.contentinput');
     
     

     if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){

        doc.html(contentweb, {
            x: margin,
            y: margin,
            html2canvas: {
                scale: scale_mobile,
            },
            callback: function(doc){
                doc.output('dataurlnewwindow', 'fichero-pdf.pdf');

            }
        });
      }else{

        doc.html(contentweb, {
            x: margin,
            y: margin,
            html2canvas: {
                scale: scale,
            },
            callback: function(doc){
                doc.output('dataurlnewwindow', 'fichero-pdf.pdf');

            },
            width: '180',
            windowWidth: '100'
        });
      }
    
    
 }

Explicación de Cada Parte:

  1. Evento de Clic: Este código se ejecuta cuando se hace clic en un elemento con el ID ygdw. El botón permitira iniciar el proceso de generación del PDF.
  2. Creación del PDF: Se crea un nuevo objeto jsPDF con el formato «letter» y se especifican las unidades como puntos («pt»). Este objeto doc servirá como el documento PDF.
  3. Margen y Escala: Se definen variables para el margen y se calcula la escala adecuada para ajustar el contenido de la página al ancho del documento PDF.
  4. Selección de Contenido: El contenido a imprimir en el PDF se selecciona mediante la función document.querySelector y se almacena en la variable contentweb.
    • Actualmente, en el codigo de arriba, estamos guardando el contenido de la pagina HTML, o sea, que a la hora de exportar el HTML a PDF, estaremos exportando los inputs con el estilo y los titulos. Esta opcion tiene un inconveniente, y es que los inputs se exportaran en una sola linea de caracteres.
    • Para solucionar esto problema, en vez de almacenar el contenido de la pagina que esta dentro de la class «contentinput«, vamos a llamar al cuerpo de la ventana modal, la cual seria todo el contenido ingresado dentro del cuerpo del modal, dentro de la clase «card-body«. Esto permite que en vez de estar exportando el contenido de los inputs, estaremos exportando el cotenido dentro parrafos, lo que permite que el PDF muestre el texto como parrafo y asi se vera todo el contenido en multiple lineas.
  5. La Condicion if va a permitir que podamos definir si estamos creando el pdf desde un dispositivo mobil o desde una PC.
    • Detección de Dispositivo: Se utiliza una expresión regular y el objeto navigator.userAgent para verificar si el usuario está en un dispositivo móvil. El flujo de trabajo difiere según si se trata de un dispositivo móvil o de un PC.
  6. Generación del PDF: Se utiliza el método doc.html para agregar el contenido del elemento contentweb al documento PDF. Se establece la escala apropiada basada en la detección de dispositivo.
  7. Mostrar o Descargar el PDF: El PDF resultante se muestra en una nueva ventana con el nombre «fichero-pdf.pdf» mediante doc.output('dataurlnewwindow', 'fichero-pdf.pdf'). La línea comentada doc.save('fichero-pdf.pdf') permitiría descargar el PDF directamente en lugar de mostrarlo en una ventana nueva.

Sin más esto es todo por hoy espero les haya gustado este tutorial, espero que hayan aprendido algo, saludos y hasta un pronto tutorial chao.