Convert HTML String to PDF Using jsPDF

Question

I have a variable named var = pictureModelHtml;

I have a for loop that create canvases and draw a picture on each canvas.

for (i = 0; i < 10; i++) {
    pictureModelHtml += '<div class="canvas" id="'+id+'"></div>;
    pictureModelHtml += '<canvas id="'+uniqueId+'">picutre</canvas>';
}

$('.canvas').each(function(i) {
    //do something that draws a picture on a canvas corresponds to the canvas id. 
}

I stuck on drawing all the pictures to a PDF. I am using jsPDF library to generate PDF. I have:

var pdf = new jsPDF();
pdf.fromHTML(pictureModelHtml);
pdf.save("myfile.pdf");

The pdf file doesn't show any picutre. It is empty. What did I miss?? Anybody has an idea how to do this? Please help!!

Any errors in console (F12)? say, security errors? If not then jsPDF might not support canvas content. I'm not sure why you don't insert the image itself instead of going via canvas? ie. pictureModelHtml += '<img src="'+imgUrl+'">'; (the images are usually cached so reusing the url should not offer any significant delays). — user1693593
– user1693593, Commented Jul 20, 2017 at 22:24

Vindhyachal Kumar · Accepted Answer · 2017-07-20 06:01:20Z

I think this code will be helpful for you. You can check working fiddle here

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <script type="text/javascript">
        var pictureModelHtml = '';
        $().ready(function () {
            var imgData;
            html2canvas($("#scream"), {
                useCORS: true,
                logging: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL('image/png');
                    imgData.crossOrigin = "Anonymous";
                    var doc = new jsPDF('p', 'pt', 'a4');
                    doc.addImage(imgData, 'PNG', 10, 10);
                    $('#scream1').attr('src', imgData);

                    for (i = 0; i < 10; i++) {
                        pictureModelHtml += '<canvas id="canvas-' + i + '">picutre</canvas>';
                        $('#someHtml').html(pictureModelHtml);
                    }

                    setTimeout(function () {
                        $('canvas').each(function (i, canvas) {
                            var c = $(canvas)[0];
                            var ctx = c.getContext("2d");
                            var img = document.getElementById("scream1");
                            ctx.drawImage(img, 10, 10);
                        });
                    }, 1000);
                }
            });



        });

        var testDivElement = document.getElementById('someHtml');

        function savePDF(canvas) {
            var imgData;
            html2canvas($("#someHtml"), {
                useCORS: true,
                logging: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL('image/png');
                    var doc = new jsPDF('p', 'pt', 'a4');
                    doc.addImage(imgData, 'PNG', 10, 10);
                    //doc.save('sample-file.pdf');
                    setTimeout(function () { window.open(imgData) }, 1000);
                }
            });
        }


    </script>
</head>
<body>
    <img id="scream" width="220" height="277" src="http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg" />
    <img id="scream1" style="display:none;" />
    <div id="someHtml"></div>
    <br />
    <button id="savePDFbutton" onclick="savePDF()">
        save pdf
    </button>
</body>
</html>

Collectives™ on Stack Overflow

Convert HTML String to PDF Using jsPDF

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related