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;
  /* margin: 50px; */
}
.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 to export pdf DOC
function pdfexport(){
  //variables
  //labels
  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';
  //input
  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;

  //jspdf part
  var doc = new jsPDF();
  //standard variables
  var boldFont = doc.setFontStyle('bold'),
      normalFont = doc.setFontStyle('normal');

  //department
  doc.setFontStyle('bold');
  doc.setFontSize(10);
  doc.text(ldept + ' ' + indpt, 5, 5);
  doc.text(lpty + ' ' + inproty, 5, 10);
  //title
  doc.setFontSize(22);
  doc.text(ltitle + ' ' + inprod, 60, 30);
  //content
  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});
  //bullet description left side
  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;
  }
  //bullet example right side
  //description
  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;
  }
  //web Title
  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;
  }
  //Highlight
  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;
  }
  //info in redinfo
  doc.setTextColor(255, 0, 0);
  doc.setFontSize(8);
  doc.text(smallinfo, 40, 210, {maxWidth: 150});
  doc.output('dataurlnewwindow',{filename: dname.value});
}

//input clear function
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.