javascript - Exporting images to jsPDF from html

I have a webpage on which I wish to print some HTML. To do so, I use html2canvas and jsPDF.

The issue that I encounter is that it does not print the images shown in the HTML.

My HTML and css looks as follows (complete code in fiddle):

.handsomeHtml {
 background: red;
}

.crazyFrog {
 background: url('.jpg');
 width: 500px;
 height: 500px;
}

<script src=".4.1/html2canvas.js">
</script>
<script src=".3.4/jspdf.debug.js">
</script>

<div id="someHtml" class="handsomeHtml">
  Hello, handsome HTML
 <br>
 <img class="crazyFrog"></img>
</div>

 <button id="savePDFbutton" onclick="savePDF()">
  save pdf
 </button>

Expected result:

Actual PDF result

I have a webpage on which I wish to print some HTML. To do so, I use html2canvas and jsPDF.

The issue that I encounter is that it does not print the images shown in the HTML.

My HTML and css looks as follows (complete code in fiddle):

.handsomeHtml {
 background: red;
}

.crazyFrog {
 background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg');
 width: 500px;
 height: 500px;
}

<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>

<div id="someHtml" class="handsomeHtml">
  Hello, handsome HTML
 <br>
 <img class="crazyFrog"></img>
</div>

 <button id="savePDFbutton" onclick="savePDF()">
  save pdf
 </button>

Expected result:

Actual PDF result

Share Improve this question asked Jul 18, 2017 at 7:19 kodeaben 2,0554 gold badges25 silver badges34 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 8

Check this working code.

You can check code on fiddle also.

<!DOCTYPE html>
    <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 testDivElement = document.getElementById('someHtml');

            function savePDF() {
                var imgData;
                html2canvas($("#someHtml"), {
                    useCORS: 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');
                        window.open(imgData);
                    }
                });
            }


        </script>
        <style>
            .handsomeHtml {
                background: red;
            }

            .crazyFrog {
                background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg');
                width: 500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div id="someHtml" class="handsomeHtml">
            Hello, handsome HTML
      <br />
            <img class="crazyFrog"></img>
        </div>
        <br />
        <button id="savePDFbutton" onclick="savePDF()">
            save pdf
        </button>
    </body>
    </html>

It might be that the jsPDF library cannot resolve images "over the wire", have you attempted to include it as a base64-encoded image directly in the CSS instead?

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Exporting images to jsPDF from html - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)