1.
Crear la estructura HTML:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Generador
1. [Link]
[Link]
de PDF desde XML</title>
<link rel="stylesheet"
href="[Link]
[Link]">
</head>
<body>
<div class="container">
1. [Link]
[Link]
<h1>Generador de PDF</h1>
<form id="myForm">
<div class="mb-3">
<label for="nombre" class="form-label">Nombre:</label>
<input type="text" class="form-control" id="nombre">
1. [Link]
[Link]
</div>
<div class="mb-3">
<label for="apellido"
class="form-label">Apellido:</label>
<input type="text" class="form-control" id="apellido">
</div>
1. [Link]
[Link]
<button type="button" class="btn btn-primary"
onclick="generarXML()">Generar XML</button>
<button type="button" class="btn btn-success"
onclick="convertirAPDF()">Convertir a PDF</button>
</form>
</div>
<script
src="[Link]
[Link]"></script>
<script
src="[Link]
js"></script>
1. [Link]
[Link]
<script src="[Link]"></script>
</body>
</html>
1. [Link]
[Link]
2. Crear el archivo JavaScript ([Link]):
JavaScript
function generarXML() {
const nombre = [Link]('nombre').value;
const apellido = [Link]('apellido').value;
const xml = `<?xml version="1.0" encoding="UTF-8"?>
<persona>
<nombre>${nombre}</nombre>
<apellido>${apellido}</apellido>
</persona>`;
// Puedes mostrar el XML en la consola para verificar
[Link](xml);
}
function convertirAPDF() {
// ... Aquí va el código para generar el PDF ...
}
3. Convertir XML a PDF:
Para convertir el XML a PDF, utilizaremos la librería jsPDF. Esta librería nos permite
crear documentos PDF desde JavaScript.
JavaScript
function convertirAPDF() {
// Primero, genera el XML (puedes llamar a la función generarXML()
aquí)
generarXML();
// Luego, crea un nuevo documento PDF
const doc = new jsPDF();
// Agrega el contenido del XML al PDF (puedes formatearlo como
quieras)
[Link](xml, 10, 10);
// Guarda el PDF
[Link]('mi_documento.pdf');
}
Explicación:
1. HTML: Se crea un formulario simple con campos para el nombre y apellido. Al
hacer clic en el botón "Generar XML", se llama a la función JavaScript
generarXML().
2. JavaScript: La función generarXML() captura los valores de los campos del
formulario y crea una cadena de texto en formato XML.
3. Conversión a PDF: La función convertirAPDF() primero genera el XML y
luego utiliza jsPDF para crear un nuevo documento PDF. El contenido del XML
se agrega al PDF como texto.
Personalización y mejoras:
Formato del PDF: Puedes utilizar las funciones de jsPDF para formatear el
PDF de manera más compleja, como agregar encabezados, pies de página,
tablas, etc.
Estilizar el XML: Puedes utilizar XSLT para transformar el XML en HTML
antes de convertirlo a PDF, lo que te permitirá aplicar estilos CSS.
Validación de datos: Antes de generar el XML, puedes validar los datos
ingresados por el usuario para asegurarte de que sean correctos.
Complejidad del XML: Puedes crear estructuras XML más complejas con
múltiples elementos y atributos para representar datos más ricos.
Consideraciones adicionales:
Librería jsPDF: jsPDF es una opción popular para generar PDFs desde
JavaScript, pero existen otras librerías disponibles con características
adicionales.
Seguridad: Si vas a procesar datos sensibles, asegúrate de implementar medidas
de seguridad adecuadas para proteger la información del usuario.
Ejemplo más avanzado:
Para un ejemplo más avanzado, podrías crear un formulario más complejo para
recopilar datos de un producto, generar un XML que represente ese producto y luego
convertirlo en un PDF con una factura detallada.