Exportar HTML a PDF con Javascript

"El tema es....", que esta ocasion traigo un ejemplo sencillo para poder exportar a pdf una tabla HTML con CSS, pues bien, esto es algo rápido, sencillo y nada complicado para hacer esto tu utilice 2 librerías , tales son:




http://mrrio.github.io/jsPDF/

http://html2canvas.hertzen.com/


Pues bien para hacer esto utilice este recurso de una tabla que aparece en la siguiente url

http://tympanus.net/Tutorials/CSS3Tables/

aquí esta su descripción de como fue generadas las tablas
http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/


pues bien lo primero que hice fue generar la tabla:


<div id="content" style="width: 600px;background-color: orange;">
<h2>Table Style 3</h2>
            <table class="table3">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col" abbr="Starter">Smart Starter</th>
                        <th scope="col" abbr="Medium">Smart Medium</th>
                        <th scope="col" abbr="Business">Smart Business</th>
                        <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th scope="row">Price per month</th>
                        <td>$ 2.90</td>
                        <td>$ 5.90</td>
                        <td>$ 9.90</td>
                        <td>$ 14.90</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <th scope="row">Storage Space</th>
                        <td>512 MB</td>
                        <td>1 GB</td>
                        <td>2 GB</td>
                        <td>4 GB</td>
                    </tr>
                    <tr>
                        <th scope="row">Bandwidth</th>
                        <td>50 GB</td>
                        <td>100 GB</td>
                        <td>150 GB</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">MySQL Databases</th>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">Setup</th>
                        <td>19.90 $</td>
                        <td>12.90 $</td>
                        <td>free</td>
                        <td>free</td>
                    </tr>
                    <tr>
                        <th scope="row">PHP 5</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">Ruby on Rails</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
                </tbody>
            </table>

        </div>


seguido de agregar el boton

 <button id="btnExportar" type="button" >


 importe los css y los js

 <link rel="stylesheet" href="http://tympanus.net/Tutorials/CSS3Tables/css/style.css" type="text/css" media="screen"/>
     
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script src="http://mrrio.github.io/jsPDF/dist/jspdf.min.js" type="text/javascript"></script>
 <script src="http://html2canvas.hertzen.com/build/html2canvas.js" type="text/javascript"></script>
     
     
     
 y por ultimo en el evento click utilice los metodos html2canvas y addImage, tal como se ve en el codigo siguiente:


 $(document).ready(function (){
    $("#btnExportar").on("click",function(){
   
    var doc = new jsPDF();
    var imgHeight=140 ;
   var imgWidth=140 ;
   var positionY=20;
   var positionX=20;

    doc.setFontSize(15);
       doc.text(15, 15, "Hola JSPDF y html2canvas");
   
    html2canvas($("#content"), {
            onrendered: function(canvas) {
var img = canvas.toDataURL("image/jpeg");
doc.addImage(img, 'JPEG', positionX ,  positionY, 140, imgWidth);
doc.save('MyPdf.pdf');
}
        });
   
    });
    });
   
 
 
 
    y listo esto quedo mas o menos así
   http://jsfiddle.net/xola139/5ddq7vkk/