将图像从 html 导出为 jsPDF答案

【问题标题】：Exporting images to jsPDF from html将图像从 html 导出为 jsPDF
【发布时间】：2017-12-22 22:13:05
【问题描述】：

我有一个网页，我想在上面打印一些 HTML。为此，我使用html2canvas 和jsPDF。

我遇到的问题是它不打印 HTML 中显示的图像。

我的 HTML 和 css 如下所示 (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>

预期结果：

实际的 PDF 结果

【问题讨论】：

标签： javascript pdf jspdf html2canvas

【解决方案1】：

检查此工作代码。

您也可以在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>

【讨论】：

图像被剪裁。这是为什么呢？
它被剪裁了，因为当您向下滚动到“保存 pdf”按钮时，您只会看到剪裁后的图像大小。如果您将 JSFiddle 的 HTML 渲染框放大，您将能够将整个图像打印为 pdf

【解决方案2】：

可能是 jsPDF 库无法“通过网络”解析图像，您是否尝试将其作为 base64 编码的图像直接包含在 CSS 中？

【讨论】：

谢谢，这确实有效，但恐怕我无法将所有内容都转换为 base64
您可以同时使用 base 64 编码器实用程序