The Digital Mike

pagina de formulario

Como crear un pdf usando jspdf

The Digital Mike

|

|

, , ,

Hola, buscando como crear un pdf usando jspdf, he hecho este video para generar un archivo pdf usando el contenido en un formulario. Esta es solo una base de como usarlo, pero puede ser improvisado.

Como crear un pdf usando jspdf

La lista de todo el proceso es la siguiente:

  1. Crea un fichero HTML con un formulario en el que el usuario va a incluir datos.
  2. Crea un fichero JavaScript que incluirá en código que se ejecutara una vez se use el botón de exportar.
  3. vincula la librería jspdf con la pagina.
  4. prueba la pagina
  5. ajusta el contenido final del pdf para que tenga mejor estética. 
  6. Si deseas ver la pagina final en accion has clic aqui para verlo en codepen

Crea el fichero HTML

Aqui esta el contenido HTML, agreguenlo dentro del cuerpo (<body>…</body>) de la pagina.

<h1 class="maintitle">Export pdf</h1>
    <label for="">Name: </label><input type="text" value="" id="dname">
    <div class="wrapper">
      <label id="ldpt">Place: </label><input type="text" id="indpt" value=""><br>
      <label id="lpty">Place Types: </label><input type="text" id="inpty" value=""><br>
      <h1 class="dentryfor" id="tlt">My Entry For <span><input type="text" id="inprod" value=""></span></h1>
      <div class="dtentry">
        <fieldset>
          <label id="lsdesc">Small Title: </label><br><input type="text" id="insdesc" value=""><br>
          <label id="lwtlt">Long Title: </label><br><input type="text" id="inwtlt" value=""><br>
          <label id="lhbd">Options  Description: </label><br>
          <input type="text" id="inhbd0" value=""><br>
          <input type="text" id="inhbd1" value=""><br>
          <input type="text" id="inhbd2" value=""><br>
          <input type="text" id="inhbd3" value=""><br>
          <input type="text" id="inhbd4" value=""><br>
        </fieldset>
        <fieldset>
          <label id="ldex">Options Examples: </label><br>
          <input type="text" id="index0" value=""><br>
          <input type="text" id="index1" value=""><br>
          <input type="text" id="index2" value=""><br>
          <label id="lwex">Long Example: </label><br>
          <input type="text" id="inwex0" value=""><br>
          <input type="text" id="inwex1" value=""><br>
          <input type="text" id="inwex2" value=""><br>
          <label id="lhbdex">Options Example: </label><br>
          <input type="text" id="inhbdex0" value=""><br>
          <input type="text" id="inhbdex1" value=""><br>
          <input type="text" id="inhbdex2" value=""><br>
          <input type="text" id="inhbdex3" value=""><br>
          <input type="text" id="inhbdex4" value=""><br>
        </fieldset>
      </div><!-- Data entry End -->
      <div class="redinfo">
      </div>
    </div>
    <br>
    <div class="cbtn">
      <a class="btnexp" href="javascript:pdfexport();">Export PDF</a>
      <a class="btnexp" href="javascript:inputClear();">Clear fields</a>
    </div>

El Codigo CSS

Este es un estilo bien simple solo para organizar el formulario.

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  padding: 5px;
  width: 100%;
}

.maintitle{
  text-align: center;
}

.wrapper{
  padding: 5px;
  width: 100%;
}

input, label{
  margin: 5px 0;
  padding: 5px 0;
}

.dentryfor{
  text-align: center;
  margin: 10px;
}

.dtentry{
  padding:10px 0;
  width: 100%;
  height: 550px;
}
.dtentry fieldset{
  float: left;
  width: 45%;
  margin: 0 2.5%;
}
.dtentry fieldset input{
  width: 95%;
  margin: 5px 2.5%;
}

.redinfo{
  text-align: center;
  color: red;
  
}
.redinfo small{
  margin: 20px 0;
}

.cbtn{
  text-align: center;
  margin-top: 20px;
}
.btnexp{
  text-decoration: none;
  background-color: #006699;
  border-radius: 10px;
  color: white;
  padding: 10px;
}
.btnexp:hover{
  background-color: #996633;
}

Crea el fichero Javascript

Javascript se va a encargar de guardar todo el contenido dentro de los campos para luego presentarlos como un fichero pdf.


function pdfexport(){


  var ldept = document.getElementById('ldpt').innerText,
      lpty = document.getElementById('lpty').innerText,
      ltitle = document.getElementById('tlt').innerText,
      lsdesc = document.getElementById('lsdesc').innerText,
      lwtlt = document.getElementById('lwtlt').innerText,
      lhbd = document.getElementById('lhbd').innerText,
      ldexc = document.getElementById('ldex').innerText,
      lwex = document.getElementById('lwex').innerText,
      lhbdex = document.getElementById('lhbdex').innerText,
      smallinfo = '** This is a small info in red, you can modified this line';

  var dname = document.getElementById('dname').value,
      indpt = document.getElementById('indpt').value,
      inproty = document.getElementById('inpty').value,
      inprod = document.getElementById('inprod').value,
      insdesc = document.getElementById('insdesc').value,
      inwtlt = document.getElementById('inwtlt').value;
      inhbds = [
                document.getElementById('inhbd0').value,
                document.getElementById('inhbd1').value,
                document.getElementById('inhbd2').value,
                document.getElementById('inhbd3').value,
                document.getElementById('inhbd4').value
               ],
      indexcs = [
                document.getElementById('index0').value,
                document.getElementById('index1').value,
                document.getElementById('index2').value
              ],
      inwexs = [
                document.getElementById('inwex0').value,
                document.getElementById('inwex1').value,
                document.getElementById('inwex2').value
              ],
      inhbdexs = [
                document.getElementById('inhbdex0').value,
                document.getElementById('inhbdex1').value,
                document.getElementById('inhbdex2').value,
                document.getElementById('inhbdex3').value,
                document.getElementById('inhbdex4').value
                ];
  var x = 0, y = 0, z = 0, w = 0;


  var doc = new jsPDF();

  var boldFont = doc.setFontStyle('bold'),
      normalFont = doc.setFontStyle('normal');


  doc.setFontStyle('bold');
  doc.setFontSize(10);
  doc.text(ldept + ' ' + indpt, 5, 5);
  doc.text(lpty + ' ' + inproty, 5, 10);

  doc.setFontSize(22);
  doc.text(ltitle + ' ' + inprod, 60, 30);

  doc.setFontSize(10);
  doc.setFontStyle('bold');
  doc.text(lsdesc, 10, 50);
  doc.setFontStyle('normal');
  doc.text(insdesc, 10, 60, {maxWidth: 80});
  doc.setFontStyle('bold');
  doc.text(lwtlt, 10, 70);
  doc.setFontStyle('normal');
  doc.text(inwtlt, 10, 80, {maxWidth: 80});

  doc.setFontStyle('bold');
  doc.setFontSize(10);
  doc.text(lhbd, 10, 100);
  doc.setFontSize(9);
  doc.setFontStyle('normal');
  for (var i = 0; i < inhbds.length; i++) {
    if( inhbds[i] != ''){
      doc.text(i + ': ' + inhbds[i], 10, 110 + w, {maxWidth: 80});
    }
    w += 10;
  }


  doc.setFontStyle('bold');
  doc.setFontSize(10);
  doc.text(ldexc, 100, 50);
  doc.setFontSize(9);
  doc.setFontStyle('normal');
  for (var i = 0; i < indexcs.length; i++) {
    if( indexcs[i] != ''){
      doc.text(i + ': ' + indexcs[i], 100, 60 + x, {maxWidth: 80});
    }
    x += 10;
  }

  doc.setFontStyle('bold');
  doc.setFontSize(10);
  doc.text(lwex, 100, 90);
  doc.setFontSize(9);
  doc.setFontStyle('normal');
  for (var i = 0; i < inwexs.length; i++) {
    if( inwexs[i] != ''){
      doc.text(i + ': ' + inwexs[i], 100, 100 + y, {maxWidth: 100});
    }
    y += 10;
  }

  doc.setFontStyle('bold');
  doc.setFontSize(10);
  doc.text(lhbdex, 100, 130);
  doc.setFontSize(9);
  doc.setFontStyle('normal');
  for (var i = 0; i < inhbdexs.length; i++) {
    if( inhbdexs[i] != ''){
      doc.text(i + ': ' + inhbdexs[i], 100, 140 + z, {maxWidth: 100});
    }
    z += 10;
  }

  doc.setTextColor(255, 0, 0);
  doc.setFontSize(8);
  doc.text(smallinfo, 40, 210, {maxWidth: 150});
  doc.output('dataurlnewwindow',{filename: dname.value});
}


function inputClear(){
  var indpt = document.getElementById('indpt').value = '',
      inproty = document.getElementById('inpty').value = '',
      inprod = document.getElementById('inprod').value = '',
      insdesc = document.getElementById('insdesc').value = '',
      inwtlt = document.getElementById('inwtlt').value = '';
      inhbds = [
                document.getElementById('inhbd0').value = '',
                document.getElementById('inhbd1').value = '',
                document.getElementById('inhbd2').value = '',
                document.getElementById('inhbd3').value = '',
                document.getElementById('inhbd4').value = ''
               ],
      indexcs = [
                document.getElementById('index0').value = '',
                document.getElementById('index1').value = '',
                document.getElementById('index2').value = ''
              ],
      inwexs = [
                document.getElementById('inwex0').value = '',
                document.getElementById('inwex1').value = '',
                document.getElementById('inwex2').value = ''
              ],
      inhbdexs = [
                document.getElementById('inhbdex0').value = '',
                document.getElementById('inhbdex1').value = '',
                document.getElementById('inhbdex2').value = '',
                document.getElementById('inhbdex3').value = '',
                document.getElementById('inhbdex4').value = ''
                ];
}

El resultado final lo podras ver en codepen.io y asi puedas comparar los resultados.