<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Generar PDF desde selección</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; margin: 40px; }
    label, select, button { display: block; margin: 10px 0; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
  </style>
</head>
<body>

  <h1>Elige tus opciones para el PDF</h1>

  <label for="tema">Selecciona un tema:</label>
  <select id="tema">
    <option value="Diario">Diario</option>
    <option value="Planning">Planning</option>
    <option value="Checklist">Checklist</option>
  </select>

  <label for="tipo">Selecciona el tipo de diseño:</label>
  <select id="tipo">
    <option value="Simple">Simple</option>
    <option value="Decorativo">Decorativo</option>
    <option value="Profesional">Profesional</option>
  </select>

  <button id="generar">Generar PDF</button>

  <script>
    document.getElementById("generar").addEventListener("click", () => {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();

      const tema = document.getElementById("tema").value;
      const tipo = document.getElementById("tipo").value;

      doc.setFontSize(20);
      doc.text("Tu PDF personalizado", 20, 20);

      doc.setFontSize(14);
      doc.text(`Tema seleccionado: ${tema}`, 20, 40);
      doc.text(`Tipo de diseño: ${tipo}`, 20, 50);

      // Guardar PDF
      doc.save(`PDF_${tema}_${tipo}.pdf`);
    });
  </script>

</body>
</html>

Deja un comentario