Create a pdf of div and then print using javascript

Question

I want to create a pdf of div and then want to print that pdf.

Inside div there is two div 1st div contents table 2nd div contents image.

<div id="printableDiv">
   <div id="1st">
     <table>
     </table>
   </div>
   <div id="2nd">
    <img>
   </div>
</div>

I tried with below code

var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', 'a4');
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
pdf.addImage(imgData, 'JPG', 10, 10, width, height);
for (var i = 1; i <= totalPDFPages; i++) {
    pdf.addPage(PDF_Width, PDF_Height);
    pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
}

but here it will create a jpeg image and then add it to pdf,

but I want to add html content directly to pdf.

Thanks in advance

You need a library like [jsPDF](https://github.com/MrRio/jsPDF) — zer00ne, May 19 '21 at 11:42
@zer00ne The code already shows the usage of jsPDF. OP was not aware of `fromHTML()`. — Peter Krebs, May 19 '21 at 11:48
Does this answer your question? [Export HTML table to pdf using jspdf](https://stackoverflow.com/questions/23035858/export-html-table-to-pdf-using-jspdf) — Peter Krebs, May 19 '21 at 11:49

score 0 · Answer 1 · answered May 19 '21 at 11:44

You can search for that question on google or stackoverflow and already find answers that can help you.

For example, see: Export HTML table to pdf using jspdf

Here is a jsfiddle link with a working example:

Export HTML table to PDF

The relevant function to call is fromHTML(), which is hopefully self-explanatory.
Code from the jsfiddle (in this example, the HTML table has id customers):

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#customers')[0];

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 10,
        width: 700
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
    }, margins);
}

Thanks for the reply @Peter Krebs, I tried using same way but didn't get expected output — Pran, May 19 '21 at 12:50
Okay so update your answer with what you have tried. You should not expect it to export as 1:1 pixel perfect PDF file. I believe you can enhance with `@media print` CSS with simple instructions (width/height/padding/margin/font attributes). — Peter Krebs, May 19 '21 at 13:37

Create a pdf of div and then print using javascript

1 Answers1