从html导出图片到jsPDF

Question

从html导出图片到jsPDF

5

我有一个网页，希望打印一些HTML内容。为此，我使用了html2canvas和jsPDF。

我遇到的问题是，它无法打印HTML中显示的图片。

我的HTML和CSS如下所示（在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>

预期结果：

实际的PDF结果

- kodeaben

2个回答

4

可能是jsPDF库无法解析来自网络的图片，您是否尝试将其作为base64编码的图片直接包含在CSS中呢？

- Anders

谢谢，那确实起作用了，但我担心我无法将所有内容转换为base64。 - kodeaben

你可以使用Base64编码器工具来并发使用。 - T. Shashwat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vindhyachal Kumar · Accepted Answer

请查看这段可用代码。

你也可以在fiddle上检查代码。

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