Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the print as PDF result using jquery

Tags:

I would like to get the HTML page in the PDF.

After some studies I found the pdfJS plugin, it has some problem with bootstrap , the layout will be messy

http://jsfiddle.net/5ud8jkvf/

here is the fiddle

I found the default print as PDF result is great

enter image description here

var doc = new jsPDF(); var specialElementHandlers = {     '#editor': function (element, renderer) {         return true;     } };  $('#cmd').click(function () {     doc.fromHTML($('#content').html(), 15, 15, {         'width': 170,             'elementHandlers': specialElementHandlers     });     doc.save('sample-file.pdf'); }); 

So , instead of fixing the problem for pdfJS, I wonder are there html / jquery way to get the pdf from the print as pdf.

The HTML need to convert to PDF is one page application form only, thanks a lot

like image 562
user782104 Avatar asked May 13 '16 10:05

user782104


People also ask

How can create HTML PDF in jQuery?

Explanation: The Export Button has been assigned a jQuery click event handler. When the Export Button is clicked, the HTML Table is converted into a HTML5 Canvas using html2canvas plugin and then the HTML5 Canvas will be exported to PDF using the pdfmake plugin.

How can download PDF with button click in jQuery?

download-ss-btn', function () { $. ajax({ type: "POST", url: 'http://127.0.0.1:8080/utils/json/pdfGen', data: { data: JSON. stringify(jsonData) } }). done(function (data) { var blob = new Blob([data]); var link = document.

Is it possible to save HTML page as PDF using JavaScript or jQuery?

If you want a client-side solution to generate PDF document, JavaScript is the easiest way to convert HTML to PDF. There are various JavaScript library is available to generate PDF from HTML. The jsPDF is one of the best library to convert HTML to PDF using JavaScript.


2 Answers

The current version allows to get the blob or the arraybuffer of the pdf. The only thing you have to do is to update from 0.9 to 1.2.x of the library and call save like this

var myBlob;  $('#cmd').click(function () {     doc.fromHTML($('#content').html(), 15, 15, {         'width': 170,             'elementHandlers': specialElementHandlers     });     myBlob = doc.save('blob'); }); 
like image 174
Richard Burkhardt Avatar answered Oct 03 '22 02:10

Richard Burkhardt


May be you can try html2canvas(It will parse the DOM, Calculate the styles applied).

(function(){ var   form = $('.form'),  cache_width = form.width(),  a4  =[ 595.28,  841.89];  // for a4 size paper width and height  $('#create_pdf').on('click',function(){  $('body').scrollTop(0);  createPDF(); }); //create pdf function createPDF(){  getCanvas().then(function(canvas){   var    img = canvas.toDataURL("image/png"),   doc = new jsPDF({           unit:'px',            format:'a4'         });              doc.addImage(img, 'JPEG', 20, 20);         doc.save('techumber-html-to-pdf.pdf');         form.width(cache_width);  }); }  // create canvas object function getCanvas(){  form.width((a4[0]*1.33333) -80).css('max-width','none');  return html2canvas(form,{      imageTimeout:2000,      removeContainer:true     });  }  }()); 

I found this here. Please check the link if you want more info.

like image 21
vijaykumar Avatar answered Oct 03 '22 00:10

vijaykumar