CODEWITHSUNDEEP
javascriptjqueryhtmlcsspdf
user782104
user782104

Reputation: 13545

How to get the print as PDF result using jquery

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

Upvotes: 23

Views: 19256

Answers (4)

Raj_King
Raj_King

Reputation: 556

Try jsPDF-AutoTable (jsPDF plugin), this may help you to convert to PDF from HTML as you want. Check out the demo

Upvotes: 1

Mohammad Sayeed
Mohammad Sayeed

Reputation: 2135

It seems you are trying to print table data into PDF Format.So you can use DataTables jQuery Plugin.

Datatables provide button library in which you can use PDF button. Its support both HTML5 and Flash and button type automatically select between the Flash and HTML button options.

$('#myTable').DataTable( {
buttons: [
    'pdf'
]
} );

Its provide excel export feature too, you just need to add excel button.

$('#myTable').DataTable( {
buttons: [
    'copy', 'excel', 'pdf'
]
} );

I have already used in our application it will not make any conflict with bootstrap.

Upvotes: 2

Richard Burkhardt
Richard Burkhardt

Reputation: 883

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');
});

Upvotes: 3

vijaykumar
vijaykumar

Reputation: 4806

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.

Upvotes: 2

Related Questions