Cannot make PDF from Html div by jsPDF

50,358

Solution 1

When using 'fromHTML' to take text from a HTML from for the PDF you are creating using JSPDF, you should have an elementHandler function to render out the unwanted < div >.

Try following the same patern as shown in the example at JSPDF@GitHub.

your end code should look like this:

var doc = new jsPDF();

    var specialElementHandlers = {
      'DIV to be rendered out': function(element, renderer){
       return true;
    }
    };


    $('#pdf_new').click(function(){
      var html=$(".wrap_all").html();
         doc.fromHTML(html,200,200, {
            'width': 500,
            'elementHandlers': specialElementHandlers
         });
      doc.save("Test.pdf");
    });

Solution 2

Check this .. this display whole content

     <head>
        <script src="https://code.jquery.com/jquery-git.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script type="text/javascript">
        $(window).on('load', function () {
            var doc = new jsPDF();
            var specialElementHandlers = {
                '#editor': function (element, renderer) {
                    return true;
                }
            };
            $('#pdfview').click(function () {
                doc.fromHTML($('#pdfdiv').html(), 15, 15, {
                    'width': 100,
                    'elementHandlers': specialElementHandlers
                });
                doc.save('file.pdf');
            });
        });
    </script>
    </head>
     <div id="pdfdiv">
                <h3 style="color:green;">WWW.SANWEBCORNER.COM</h3>
                <img src="404.png">
                <p>A newspaper acts an important medium to control corruption and scams. The chief topics of general interest in newspaper includes politics, social issues, sports, economy, movies, and share market.

    Newspaper is a mode of mass communication. It is very helpful in creating social awareness. Newspaper raises voices against social issues such as child labor, dowry system, etc. They urge the common people to act and behave in a rational manner.

    We get the information of the forthcoming movies and television shows through a newspaper. It also contains a list of multiplexes with time-schedule for the movies.

    A wide coverage of information is obtained at low cost though newspaper. It also influences the habit of thinking in men. It has also seen that illiterate adults are taking up education to read newspaper.

    There are such dailies that trade on such dirty tricks for survival. Being politically left or right, they misrepresent strikes and lockouts. Events like bank robbery and train accident or similar untoward events are distorted or exaggerated. They deliberately make their news sensational because it appeals to the less educated and less cultured more directly.

    The dignity and reputation of a newspaper rests on the degree of their fidelity to truth and fearless reporting. It is our cheapest and most powerful weapon in the last analysis.</p>
            </div>
            <div id="editor"></div>
            <button id="pdfview">Download PDF</button>
Share:
50,358
Pavel Lankmiler
Author by

Pavel Lankmiler

Updated on July 09, 2022

Comments

  • Pavel Lankmiler
    Pavel Lankmiler almost 2 years

    I have this js code :

    var doc = new jsPDF();
    
    $('#pdf_new').click(function(){
        var html=$(".wrap_all").html();
        doc.fromHTML(html,200,200, {
            'width': 500,
        });
        doc.save("Test.pdf");
    });
    

    In html I have code like this :

    <div class = 'wrap_all'>
        <div id = 'wrap_odd'> <div id = ''>....</div> </div>
    
        <div id = 'wrap_even'> <div id = ''>....</div> </div>
    </div>
    

    Nothing works ... Console return to me:

    Cannot read property #wrap_odd of undefined"

    (P.S sorry for my English)

  • snehanshu.js
    snehanshu.js almost 4 years
    What if I don't have any unwanted elements?