problema con la libreria jspdf

maximendez88 · #1 (**permalink**) 07/04/2015, 12:28

Buenas tardes estoy intentando hacer una copia de mi html y guardarla en un pdf con la libreria jspdf, desafortunadamente no me esta funcionando y no me doy cuenta que estoy haciendo mal... ya que con el ejemplo me funciona perfectamente pero no me trae nada en el pdf... cuando le cambio el nombre a "plantilla" deja de funcionar directamente...... dejo mi código a ver si alguien me puede ayudar

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Crear Planilla</title>
 
 
    <script type="text/javascript" src="planilla.js"></script>
    <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js">     </script>    
    <script type="text/javascript" src="dist/jspdf.debug.js"></script>
    <script type="text/javascript" src="js/basic.js"></script>
 
<style>
 
body
{
    font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
 
 
<center>
<div id="crear">
 
<form enctype="multipart/form-data" method="post" target="_self" name="formplantilla" action="">
<table id="tblcrear" border="1" width="800" align="center">
<tr>
<td>Empresa</td>
<td><input type="text" id="empresa" /></td>
<td></td>
</tr>
<tr>
<td>Curso</td>
<td><input type="text" id="curso" /></td>
<td></td>
</tr>
<tr>
<td>Profesor</td>
<td><input type="text" id="profesor" /></td>
<td></td>
</tr>
<tr>
<td>Cantidad de alumnos</td>
<td><input type="text" id="cantalumnos" onkeypress="return justNumbers(event);" /></td>
<td></td>
</tr>
<tr>
<td>Horario incio de clase (hh:mm)</td>
<td>
<input type="text" id="inicio" value="" maxlength="5" />
</td>
<td></td>
</tr>
<tr>
<td>Horario finalización de clase (hh:mm)</td>
<td>
<input type="text" id="fin" value="" maxlength="5" />
</td>
<td></td>
</tr>
<tr>
<td>Cantidad de Clases en el mes</td>
<td>
<select id="cantclases">
<option value="Seleccione">Seleccione Cantidad de Clases</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>
 
</select>
</td>
<td></td>
</tr>
<tr>
<td>Mes</td>
<td>
<select id="mes">
  <option value="Seleccione">Seleccione Mes</option>
  <option value="Enero">Enero</option>
  <option value="Febrero">Febrero</option>
  <option value="Marzo">Marzo</option>
  <option value="Abril">Abril</option>
  <option value="Mayo">Mayo</option>
  <option value="Junio">Junio</option>
  <option value="Julio">Julio</option>
  <option value="Agosto">Agosto</option>
  <option value="Setiembre">Setiembre</option>
  <option value="Octubre">Octubre</option>
  <option value="Noviembre">Noviembre</option>
  <option value="Diciembre">Diciembre</option>
  
</select>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btncrear" onclick="crearplantilla();"  value="Crear Plantilla" /></td>
<td></td>
</tr>
 
</table>
</form>
 
<form enctype="multipart/form-data" action="http://imagina.com.uy/crearplanilla/crearpdf.php" target="new" id="formcrearpdf" name="formcrearpdf" method="post">
 
<div id="plantilla">
 
<table id="tblmes" style="display:none;" border="0" width="800" align="center">
 
</table>
 
<table id="tblcantclases" style="display:none;" border="1" width="800" align="center">
 
</table>
 
<table id="tblestudiantes" style="display:none;" border="1" width="800" align="center">
 
</table>
 
<table id="tblcalculos" style="display:none; margin-top:15px; text-align:left;" border="0" width="800" align="center">
 
</table>
 
</div>
</form>
<ul style="text-align:left; margin:15px 410px; display:none;" id="especificaciones">
<li>Presente: P</li> 
<li>Ausente:  A</li>
<li>Cancelada en tiempo: C</li>
<li>Cancelada sin aviso o fuera de plazo: X</li>
</ul>
</center>
</body>
</html>

Código Javascript:

Ver originalfunction pdf() {
 
 
var pdf1 = new jsPDF('p', 'in', 'letter')
 
    
    , source = $('#plantilla')[0]
 
    
    , specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function(element, renderer){
            
            return true
        }
    }
 
    
    pdf1.fromHTML(
        
        , 0.5 // x coord
        , 0.5 // y coord
        , {
            'width':7.5 // max width of content on PDF
            , 'elementHandlers': specialElementHandlers
        }
    )
 
    pdf1.save('planilla.pdf');
 
 
 
 
 
}

juliocesarposada · #2 (**permalink**) 19/09/2015, 17:26

Buenas tardes,

En el codigo que estas presentando veo algunos errores:

En el onclick del boton crear plantilla estas llamando la funcion crearplantilla(); y en el archivo .js no tienes ese nombre de funcion.

Una vez que cambies el nombre de la funcion por la correcta (crearplantilla), la funcion deberia tener la siguiente estrutuctura

function crearplantilla() {

var doc = new jsPDF();

// We'll make our own renderer to skip this editor
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};

// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('body').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});

}

Saludos.

Julio Posada