简体   繁体   中英

Cannot make PDF from Html div by jsPDF

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"

(PS sorry for my English)

When using 'fromHTML' to take text from a HTML from for the PDF you are creating using JSPDF, you should have an function to render out the unwanted < div > . 函数来呈现不需要的<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");
    });

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>

Just a word of caution: be careful of the placement of elements in the printable element container !

It seems as if jsPDF is very sensitive to elements being just right. This includes images and links.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM