CODEWITHSUNDEEP
phpjquery
Neha Sharma
Neha Sharma

Reputation: 21

Export html content to PDF

<script>
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');
});
</script>
<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
	<img src="4.jpg" />
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

I am exporting html to pdf. Without image in html content PDF exporting properly,But if I add image to HTML content it creates blank pdf.

Upvotes: 0

Views: 3274

Answers (2)

Rohan Mulay
Rohan Mulay

Reputation: 349

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script>
function toPdf() {
var doc = new jsPDF();
// We'll make our own renderer to skip this editor
    var specialElementHandlers = {
        '#editor' : function(element, renderer) {
            return true;
        }
    };

    // All units are in the set measurement for the document
    // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
    doc.fromHTML($('#render_me').get(0), 30, 50, {
        'width' : 170,
        'elementHandlers' : specialElementHandlers
    });

    doc.save('sample-file.pdf');
}

Give id="render_me" to div what you want to render. for example

<table id="render_me"></table>

Upvotes: 3

Nehal J Wani
Nehal J Wani

Reputation: 16619

When using the fromHTML() it's important to save the pdf in the callback, because else it won't be done rendering by the time it saves the doc.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script>
$(document).ready(function() {
    var doc = new jsPDF();
    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
        }, function () {
            doc.save('sample-file.pdf')
        });
    });
});
</script>

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
        <img src="//i.imgur.com/7NtRajR.jpg" />
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

Demo: https://jsfiddle.net/qcyspvy7/

Upvotes: 1

Related Questions