cómo usar html2canvas y jspdf para exportar a pdf de una manera adecuada y sencilla

Actualmente estoy trabajando en un software de administración escolar que generalmente requiere la exportación de contenido html que contiene data tables y div tag .

He intentado todos los medios posibles para escribir un código que pueda exportar mis datos html de una buena manera, con css preferiblemente. Después de verificar algunas preguntas y respuestas aquí, intenté usar spdf, pero no tuve suerte.

Sigue destruyendo la alineación de mi tabla, luego leí sobre html2canvas pero para implementarlo con jspdf era mi problema, me gustaría capturar el contenido si una etiqueta div con html2canvas luego envía el canvas a jspdf para exportar el canvas como pdf.

Aquí está mi código a continuación:

           

aquí está el código js

 var pdf = new jsPDF('p', 'pt', 'letter'); pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () { pdf.save('Test.pdf'); }); 

He hecho una jsfiddle para ti.

    

  html2canvas($("#canvas"), { onrendered: function(canvas) { var imgData = canvas.toDataURL( 'image/png'); var doc = new jsPDF('p', 'mm'); doc.addImage(imgData, 'PNG', 10, 10); doc.save('sample-file.pdf'); } }); 

jsfiddle: http://jsfiddle.net/rpaul/p4s5k59s/5/

Probado en Chrome38, IE11 y Firefox 33. Parece tener problemas con Safari. Sin embargo, Andrew lo hizo funcionar en Safari 8 en Mac OSx cambiando a JPEG de PNG. Para más detalles, vea su comentario a continuación.