Hola, al momento de diseñar formularios interactivos en una página web que estes creando, los elementos como checkboxes y radio buttons son herramientas fundamentales que te permitiran que los usuarios realicen selecciones claras y concisas. Sin embargo, cuando se trata de preservar o compartir la información recopilada a través de estos controles, surge la necesidad de exportar estos datos a un formato más universal que el de una página web. Aqui veras como Exportar Checkboxes y Radio Buttons a pdf de manera sencilla.
El formato PDF es ampliamente utilizado por su capacidad para mantener la integridad del contenido y su facilidad de distribución. En este artículo, te voy a enseñar a como exportar checkboxes y radio buttons de tus formularios HTML a PDF.
Este tutorial te permitira aprender a agregar dichas entradas de input cuando exportes el formulario a pdf. Para esto usaremos la libreria jspdf, asi como la libreria html2canvas. Con estas dos librerias, podras aprender dos formas de generar dichos documentos. Sin mas vamos a comenzar con el tutorial.
Aqui dejo el tutorial en video, asi podras seguir el texto mientras sigues el tutorial.
¿Qué es un Radio Button y checkbox?
Los Radio Buttons y Checkboxes son elementos comunes en las interfaces de usuario de aplicaciones web y formularios en línea que permiten a los usuarios hacer selecciones.
Radio Button
El Radio Button, o botón de opción, permite a un usuario seleccionar una sola opción de un conjunto limitado de opciones mutuamente excluyentes. Usualmente, cuando se selecciona un Radio Button, cualquier otra opción previamente seleccionada en el mismo grupo se deselecciona; es decir, solo puedes seleccionar una opción a la vez. Para crear un radio button, usamos el elemento input y el atributo type="radio".
<input type="radio" name="radiobutton" /> Radio 01
<input type="radio" name="radiobutton" /> Radio 02Checkbox
Un Checkbox, o casilla de verificación, ofrece más flexibilidad que los Radio Buttons, ya que permite al usuario seleccionar múltiples opciones de un conjunto de alternativas. Puedes marcar o desmarcar una casilla de verificación sin afectar a las demás en la lista. Los Checkboxes son útiles cuando necesitas recolectar todos los intereses o preferencias aplicables a un usuario. En el marcado HTML, se define usando el elemento input con el atributo type="checkbox".
Aquí hay un ejemplo simple de cómo pueden verse ambos elementos en HTML:
<form>
<p>Elige tu sistema operativo preferido:</p>
<input type="radio" id="windows" name="os" value="windows">
<label for="windows">Windows</label><br>
<input type="radio" id="mac" name="os" value="mac">
<label for="mac">Mac</label><br>
<input type="radio" id="linux" name="os" value="linux">
<label for="linux">Linux</label><br>
<p>Selecciona tus lenguajes de programación favoritos:</p>
<input type="checkbox" id="java" name="lang" value="java">
<label for="java">Java</label><br>
<input type="checkbox" id="python" name="lang" value="python">
<label for="python">Python</label><br>
<input type="checkbox" id="javascript" name="lang" value="javascript">
<label for="javascript">JavaScript</label><br>
</form>
De esta manera, los Radio Buttons y los Checkboxes desempeñan roles cruciales en la recolección de datos y las preferencias de los usuarios en las interfaces de usuario.
¿Cómo poner un Radio Button en HTML?
Para poner un radio button en un fomulario, debemos usa un elemneto <input> con unatributo type="radio". Ademas de esto, debemos agregar el atributo name="unNombre", el cual permitira agrupar todos los radio buttons que hagamos para un objetivo especifico.
Por ejemplo, si deseamos que el cliente que esta llenando un formulario, tenga la opcion de elegir entre SI, NO, NO APLICA en un formulario, podemos hacerlo usando los radio buttons de la siguiente manera, ex:
Vista previa del ejemplo
<form>
...<br>
<p>Elige tu sistema operativo preferido:</p>
<input type="radio" id="windows" name="os" value="windows">
<label for="windows">Windows</label><br>
<input type="radio" id="mac" name="os" value="mac">
<label for="mac">Mac</label><br>
<input type="radio" id="linux" name="os" value="linux">
<label for="linux">Linux</label><br>
</form> El ejemplo presenta un extracto de un formulario en el que el usuario debera elegir entre tres opciones para responder la pregunta que se le presenta.
Como los radio buttons tienen todos el mismo atributo name, el usuario podra elegir una de las tres opciones presentadas.
Para poder guardar la opcion elejida por el usuario que esta llenando el formulario, podremos llamar a los radio buttons en javascript por el atributo id, o si queremos podremos llamar al atributo name y luego guardamos el resultado seleccionado que pondremos dentro del atributo value.
¿Cómo hacer un Checkbox en HTML?
Para poner un checkbox button en un fomulario, debemos usa un elemneto <input> con un atributo type="checkbox". Ademas de esto, debemos agregar el atributo name="unNombre", el cual permitira agrupar todos los checkboxes que hagamos para un objetivo especifico. Si ademas, incluimos un id, podremos acceder al checkbox usando JavaScript. Si agregamos el atributo value, podemos utilizar este valor para guardarlo en una variable cuando llamemos al input en JavaScript.
Ejemplo de checkbox
<form>
...<br>
<p>Selecciona tus lenguajes de programación favoritos:</p>
<input type="checkbox" id="java" name="lang" value="java">
<label for="java">Java</label><br>
<input type="checkbox" id="python" name="lang" value="python">
<label for="python">Python</label><br>
<input type="checkbox" id="javascript" name="lang" value="javascript">
<label for="javascript">JavaScript</label><br>
</form>
En este ejemplo, vamos a usar checkboxes para darle al usuario la posibilidad de selccionar las opciones que desee. Van a ver tres opciones para elejir que lenguaje de programacion les gusta mas al usuario que esta llenando el formulario.
Para poder guardar las opciones elejidas por el usuario que esta llenando el formulario, podremos llamar las entradas de cada casilla usando javascript por el atributo id, o si queremos, podremos llamarlo por el atributo name y usando un for loop, podremos guardar los checkboxes en un arreglo para luego acceder al resultado que pondremos dentro del atributo value.
¿Como exportar el Radio Button y Checkboxes a PDF?
Para exportar los checkboxes y los radio buttons a PDF, debemos hacer uso de la libreira jspdf.
Con la libreria jsPdf, podremos exportar el contenido del formulario usando sus funciones. Es un poco mas extenso pues debemos agregar cada opcion por separado practicamente. Si deseamos mantener el estilo del formulario, podemos hacer uso de la libreria html2canvas, y asi exportar la pagina HTML completa con estilo y todo a PDF.
Comenzar con la pagina HTML
En este ejemplo de tutorial, vas a aprender como crear y exportar el radio button y el checkbox a pdf. Para esto vamos a suponer que tenemos ya un formulario sencillo creado, pero con proposito de aprender. Aqui te dejo un ejemplo simple que puedes usar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main style="display: block;text-align: center;width: 100%; height: 100%;">
<section style="display: block;margin-top: 50px;">
<input type="text" id="inpttxt" value=""/>
<fieldset>
<legend>Seleccionar optiones</legend>
<div>
<label><input type="checkbox" name="chequeame" id="chkx00" value="checkbox 01"><span> checkbox 01</span></label>
<label><input type="checkbox" name="chequeame" id="chkx01" value="checkbox 02"><span> checkbox 02</span></label>
</div>
<div>
<input type="radio" name="radiobtn" id="rd01" value="radio 01"><span>Radio 01</span>
<input type="radio" name="radiobtn" id="rd02" value="radio 02"><span>Radio 02</span>
</div>
<div>
<select name="selectop" id="sl">
<option value="none">None</option>
<option value="Opcion 01">Select 01</option>
<option value="Opcion 02">Select 02</option>
</select>
</div>
</fieldset>
<div><p><button id="btnd">Mostrar Pdf</button> <button id="btnpdf">Crear con jsPDF y htmltocanvas</button> <button id="btnspdf">Crear con jsPDF</button></p></div>
</section>
<section id="final" style="text-align: left;"></section>
</main>
<script></script>
</body>
</html>En el codigo de arriba, presentamos una pagina simple en HTML con un pequeño formulario como ejemplo para demostrar dos formas de como exportar radio buttons, checkboxes y select options como un extra a PDF. Todo esto usando como librerias las de jsPdf y html2canvas. Si copian este contenido y crean un archivo html, y lo pegan, una vez abierto el fichero en el navegador veran un resultado como el siguiente:
Ahora, veran que he el formulario no hace nada, y esto es porque no hemos agregado las librerias, ni hemos creado el codigo JavaScript que le da vida a este formulario.
¿Como agregar las librerias a la pagina HTML?
Para agregar las librerias jspdf y html2canvas al la pagina vamos a: o descargar las librerias, o en nuestro caso, copiaremos los CDN para usarlos directamente en la pagina.
Libreria jsPDF
Para la libreria jsPDF vamos a ir la pagina de la libreria y compiamos la primera opcion, la cual es la del CDN. Para facilitarte esto aqui te dejo el codigo del cdn.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>Una vez que copies el script, pegalo al final de el archivo HTML, justo antes de la etiqueta </body>. aqui el ejemplo:
...
<section id="final" style="text-align: left;"></section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
</body>Libreria HTML2Canvas
Para la libreria html2canvas, seguiremos la misma indicaciones que hicimos con la de jsPDF. Vamo a ir a la pagina de html2canvas y vamos darle al boton que dice html2canvas.js. Al hacer click en el boton el navegador va a mostrar el codigo de la libreria, entoces podremos guardarlo como un fichero js. Si por el contrario hacemos click derecho en el boton, podemos elegir la opcion guardar hipervinculo como… y automaticamente nos permitira guardar el archivo .js en nuestra PC.
Ya con la libreria descargada, vamos a la pagina que estamos creando, y agregamos la libreria. Para esto nos aseguramos de copiar la libreria en la misma carpeta en donde tenemos el projecto. Luego agregamos la libreria a la pagina HTML, justo debajo de donde incluimos la libreria jsPDF, usando una etiqueta <script>, y dentro, usando el stributo src="", agregamos la libreria escribiendo la ruta en la que la libreria se encuentra. Si la ruta es la misma carpeta raiz del projecto, solo ponemos el nombre de la libreria y su extension, ejemplo: html2canvas.js. Si tenemos una carpeta dedicada a todos los codigos dentro de la carpeta raiz, escribiremos lo mismo pero agregando la carpeta, ejemplo: js/html2canvas.js.
...
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script type="text/javascript" src="html2canvas.js"></script>
</body>Y ya con esto estaremos listos para comenzar a escribir el codigo que permitira exportar a PDF el formulario.
Declarando variables en JavaScript
Para declarar las variables en javascript, vamos a estar usando a la palabra var, la cual se usa para declarar variables en javascript.
Conociendo esto, vamos a declarar todas las variables que vamos a usar. Y estas no son mas que las que nos permitiran acceder al DOM de la pagina HtML y obtener sus valores o los valores que el usuario ingrese en la pagina.
Para comenzar, vamos a escribir debajo de las librerias, otro elemento <script> y justo dentro del elemento, vamos a declarar las variables que vamos a usar. El nuevo codigo lo ire escribiendo en negritas.
...
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script>
var btnshow = document.getElementById('btnd'),
btnspdf = document.getElementById('btnspdf'),
btnpdf = document.getElementById('btnpdf'),
inpTxt = document.getElementById('inpttxt'),
final = document.getElementById('final'),
chkx = document.querySelectorAll('input[type=checkbox]'),
rdo = document.querySelectorAll('input[type=radio]'),
sl = document.getElementById('sl');
</script>
</body>En el ejemplo de arriba, solo hago uso de un solo var para declarar todas mis variables. Y para separar cada variable uso una coma. Pero esta es mi forma, si te sientes comodo o comoda declarando las variable de manera separada puedes hacerlo asi.
var btnshow = document.getElementById('btnd');
var btnspdf = document.getElementById('btnspdf');
var btnpdf = document.getElementById('btnpdf');
var inpTxt = document.getElementById('inpttxt');
var final = document.getElementById('final');
var chkx = document.querySelectorAll('input[type=checkbox]');
var rdo = document.querySelectorAll('input[type=radio]');
var sl = document.getElementById('sl');Declarando Funciones reutilizables y otras acciones a usar en el codigo
Funcion que retorna una lista
Lo siguiente es crear una funcion que vamos a usar para presentar el resultado de los radio buttons y los checkboxes. Esto nos va a ser util pues asi no tenemos que estar escribiendo multiples veces el mismo codigo. Y asi estaremos aprendiendo tambien la programacion orientada a objetos. Sin mas aqui dejo la funcion:
function ul_list(item){
var ulList = '';
item.forEach(el =>{
if(el.checked == true){
ulList += '<li>' + el.value + '</li>';
}
});
return '<ul>'+ ulList + '</ul>';
}La funcion va a tener una variable item la que usaremos para agregar la variable de los radio button asi como la de los checkboxes. A esta variable le vamos a hacer una forEach y usando una condicion vamos a verificar si estos objetos estan chequeados (checked). si lo estan, lo agregamos a una variable antes declarada ulList y luego retornamos una list <ul> con el contenido de chequeado.
Funcion que retorna una sola opcion de un select
Esta funcion nos devolvera la opcion que elijamos en un select option input.
function select_op(item){
var opciones = item.options[item.selectedIndex].value;
if(opciones === 'none'){
return 'Sin opciones';
} else{
return opciones;
}
}Esta funcion va guardar el valor seleccionado en un select en la variable opciones. Luego checkeamos la variable opciones usando una conditional. Si no se selecciona nada la funcion va a devolver un texto, en nuestro caso devuelve «Sin Opciones«. Si en el caso de que seleccionemos alguna opcion, la funcion va a devolver la opcion seleccionada.
Deshabilitar botones
Para deshabilitar botones vamos a estar haciendo una condition que inabilitara los botones segun la condition que declaremos. En nuestro caso, vamos a verificar si el contenedor en donde presentaremos el resultado final esta vacio, y si lo esta, vamos a dishabilitar los botones.
if(final.innerHTML === ''){
btnpdf.disabled = true;
btnspdf.disabled = true;
}El codigo chequea si la variable final que corresponde al contenedor donde veremos el resultado que mostraremos cuando hagamos click en el boton Mostrar. si este esta vacio, entonces agregaremos el atributo disabled a los botones usando la linea de codigo arriba presente como: btnpdf.disabled = true;. el resultado de este codigo lo podremos ver directo.
Como mostrar un fomulario en un div usando un boton?
Para mostrar el resultado de un formulario en un contenedor div usando un boton, vamos usar la opcion onclick a la que le vamos a asignar una funcion que permitira agregar HTML con los valores del formulario a un contenedor que crearemos y que insertaremos en la zona que designemos para mostrar el resultado del formulario. Debajo les dejos el codigo para esto y lo iremos explicando.
Primero, creamos el evento click y presentamos una function vacia por el momento. Luego la iremos llenando.
btnshow.onclick = function(){
...
};Lo siguiente sera crear un elemento en el que vamos a agregar el HTML con el contenido del formulario.
btnshow.onclick = function(){
var previewDiv = document.createElement('div');
};Una vez declarada la variable, vamos a usar innerHTML para insertar el nuevo HTML junto con el valor del formulario, ya guardadas en las variables.
Primero agregamos un titulo:
...
previewDiv.innerHTML = `
<div style="text-align:center;">
<h1>Titulo</h1>
<div>
`Luego agregamos el primer valor perteneciente al input de texto.
<p style="font-size:18px;background:red;width:fit-content;padding:10px;font-weight:700;color:white;">${inpTxt.value} </p>Continuamos con la presentacion de los radio buttons y los checkboxes. En este momento vamos a estar utilizando las funciones que declaramos anteriormente. En este caso la funcion que usaremos es ul_List(item).
...
<div style="display:flex; gap:1;">
<div style="width:50%;">
<h2 style="color:red;">Checkboxes<h2>
<p> ${ul_list(chkx)} </p>
</div>
<div style="width:50%;">
<h2 style="color:red;">Radio Buttons<h2>
<p> ${ul_list(rdo)} </p>
</div>
</div>
...Lo siguiente es la opcion select y para esto usaremos la otra funcion que declaramos anteriormente.
<h2 style="color:red;">Selected Option<h2>
<p> ${select_op(sl)} </p>Y con esto termina todo lo que va dentro de innerHTML. lo siguiente sera crear el checkeo para que cuando se modifique el formulario y le b=volvamos a dar click al boton, este no duplique el contenido, sino que lo remplace con el contenido actualizado.
if(final.innerHTML === ''){
final.appendChild(previewDiv);
btnpdf.disabled = false;
btnspdf.disabled = false;
} else{
final.innerHTML = '';
final.appendChild(previewDiv);
btnpdf.disabled = false;
btnspdf.disabled = false;
}En la condicion, primero chequeamos si el contenedor final esta vacio y de ser asi, le apendamos el contenido de previewDiv antes creado y activamos los botones de exportacion para asi poder usarlos. Si por el contrario ya existe contenido el la variable final, primero la vaciamos para luego agregarle el contenido actualizado en previewDiv y luego activamos los botones para poder usarlos.
Con esto ya tenemos completa la funcion, abajo dejo el codigo entero por si desean usarlo directamente.
btnshow.onclick = function(){
var previewDiv = document.createElement('div');
previewDiv.innerHTML = `
<div style="text-align:center">
<h1>Title</h1>
</div>
<p style="font-size:18px;background:red;width:fit-content;padding:10px;font-weight:700;color:white;">${inpTxt.value} </p>
<div style="display:flex; gap:1;">
<div style="width:50%;">
<h2 style="color:red;">Checkboxes<h2>
<p> ${ul_list(chkx)} </p>
</div>
<div style="width:50%;">
<h2 style="color:red;">Radio Buttons<h2>
<p> ${ul_list(rdo)} </p>
</div>
</div>
<h2 style="color:red;">Selected Option<h2>
<p> ${select_op(sl)} </p>`;
if(final.innerHTML === ''){
final.appendChild(previewDiv);
btnpdf.disabled = false;
btnspdf.disabled = false;
} else{
final.innerHTML = '';
final.appendChild(previewDiv);
btnpdf.disabled = false;
btnspdf.disabled = false;
}
}Si probamos el codigo ahora mismo y llenamos el contenido del formulario, una vez que hagamos click en el boton Mostrar veremos el resultado que muestro en la imagen debajo. Ya casi estamos listo para exportar radio buttons, checkboxes a pdf.
¿Como Exportar usando las dos librerias, jsPDF y html2canvas?
En este paso, ya con los botones activos, podemos comenzar a exportar el formulario a pdf.
Si has seguido este blog, veras que usaremos el mismo cogido que utilizamos para crear tablas en PDF. Pero en todo caso vamos seguir el proceso que voy a presentar.
Comenzaremos como mismo hicimos con el boton para mostrar el HTML.
btnpdf.onclick = function(){
...
};Seguiremos con la declaracion de las variable para el pdf. comentare el codigo para explicarlo.
var doc = new jsPDF('p', 'pt', 'letter'),
margin = 10,
rectWidth = doc.getTextWidth(inpTxt),
scale = (doc.internal.pageSize.width - margin * 2) / document.body.clientWidth; Luego usaremos la opcion html para exportar el contenido dentro de la variable final. Aqui esta el codigo que pondremos siguiente.
doc.html(
final,
{
x: margin,
y: margin,
html2canvas:{
scale: scale,
},
callback: function(doc){
doc.output('dataurlnewwindow', 'newpdf.pdf');
}
});Con todo esto ya podremos usar la opcion de exportar Checkboxes y Radio Buttons a pdf usando las librerias jspdf y html2canvas. El resultado aqui abajo:
¿Como Exportar usando la libreria jsPDF solamente?
Para esta opcion vamos a comenzar con agregarle el evento onclick al boton. Esta forma te permitira exportar los radio buttons, y checkboxes a pdf, usando las opciones de la propia libreria.
btnspdf.onclick = function(){
...
};Luego declararemos las variables a utilizar.
var w = 0;
var doc = new jsPDF('p', 'pt', 'letter'),
margin = 10,
rectWidth = doc.getTextWidth(inpTxt.value);
Ahora crearemos el pdf usando las opciones de jspdf. Primero crearemos el titulo. Usaremos .setFontStyle para definir el grosor de la fuente, .setFontSize para darle el tamaño a la fuente y .text para agregar el texto al documento pdf.
Recuerden, a partir de ahora cada parte del codigo debe crearse en la secuencia que aqui presento. Cuando elaboramos el pdf las configuraciones vienen primero y por ultimo incorporamos el texto.
doc.setFontStyle('bold');
doc.setFontSize(20);
doc.text('Title', margin, margin + 10); Ahora agregaremos las opciones para insertar el valor del input. Usaremos las opciones del titulo ademas de la opcion .setFillColor para darle color al fondo del texto, .rect para generar un rectangulo que funcionara como fondo del texto, y .setTextColor para dar color al texto.
doc.setFontStyle('bold');
doc.setFontSize(18);
doc.setFillColor("Red");
doc.rect(margin+20, margin + 30, rectWidth * 2, 50, 'F');
doc.setTextColor(255, 255, 255);
doc.text(inpTxt.value, margin + 25, margin + (100/2));Lo siguiente sera generar los checkboxes. Para esto usaremos un forEach para iterar por todos los checkboxes, dentro haremos un docicion que chequeara si la casilla esta chequeada y de ser asi lo presenta en el pdf. Usaremos la variable w para posicionar el texto uno debajo del otro y al final, antes de terminar el forEach, aumentaremos el valor de la variable w.
doc.setFontSize(16);
doc.setTextColor(255, 0, 0);
doc.text('CheckBoxes', margin, margin + 100);
chkx.forEach(el =>{
if(el.checked == true){
doc.setTextColor(0, 0, 0);
doc.text('- ' + el.value, margin, margin + 120 + w,);
}
w += 15;
});Para mantener el diseño de la pagina HTML, vamos a agregar ahora la parte que muestra la opcion de seleccionar.
doc.setFontSize(16);
doc.setTextColor(255, 0, 0);
doc.text('Selected Option', margin, margin + 120 + w);
doc.setTextColor(0, 0, 0);
doc.text('- ' + select_op(sl), margin, margin + 140 + w); Luego Agregaremos los radio buttons. Como los radio solo muestran un solo resultado cuando se seleccionan, lo primero que vamos a hacer es resetear la variable w a cero, y no la usaremos para presentar los radio buttons.
w=0;
doc.setFontSize(16);
doc.setTextColor(255, 0, 0);
doc.text('Radio Buttons', margin + 250, margin + 100);
rdo.forEach(el =>{
if(el.checked == true){
doc.setTextColor(0, 0, 0);
doc.text('- ' + el.value, margin + 250, margin + 120);
}
});Para finalizar vamos a agregar la linea que permite exportar el contenido a PDF.
doc.output('dataurlnewwindow','pdf-file');Y aqui esta el codigo completo para la parte de exportar solo con la libreria jspdf.
btnspdf.onclick = function(){
var w = 0;
var doc = new jsPDF('p', 'pt', 'letter'),
margin = 10,
rectWidth = doc.getTextWidth(inpTxt.value);
doc.setFontStyle('bold');
doc.setFontSize(20);
doc.text('Title', margin, margin + 10);
doc.setFontStyle('bold');
doc.setFontSize(18);
doc.setFillColor("Red");
doc.rect(margin+20, margin + 30, rectWidth * 2, 50, 'F');
doc.setTextColor(255, 255, 255);
doc.text(inpTxt.value, margin + 25, margin + (100/2));
doc.setFontSize(16);
doc.setTextColor(255, 0, 0);
doc.text('CheckBoxes', margin, margin + 100);
chkx.forEach(el =>{
if(el.checked == true){
doc.setTextColor(0, 0, 0);
doc.text('- ' + el.value, margin, margin + 120 + w,);
}
w += 15;
});
doc.setFontSize(16);
doc.setTextColor(255, 0, 0);
doc.text('Selected Option', margin, margin + 120 + w);
doc.setTextColor(0, 0, 0);
doc.text('- ' + select_op(sl), margin, margin + 140 + w);
w=0;
doc.setFontSize(16);
doc.setTextColor(255, 0, 0);
doc.text('Radio Buttons', margin + 250, margin + 100);
rdo.forEach(el =>{
if(el.checked == true){
doc.setTextColor(0, 0, 0);
doc.text('- ' + el.value, margin + 250, margin + 120);
}
});
doc.output('dataurlnewwindow','pdf-file');
};Y ya con esto hemos terminado el codigo que nos permitira exportar radio buttons, y checkboxes a pdf. Espero les haya gustado este tutorial y nos vemos en el proximo.