如何使用 jsPDF 库将图像从 HTML 插入 PDF？答案

【问题标题】：How to insert image from HTML to PDF with jsPDF library?如何使用 jsPDF 库将图像从 HTML 插入 PDF？
【发布时间】：2014-03-05 15:01:52
【问题描述】：

由于 jspdf 不支持 utf8 字符，我尝试将部分字符替换为图像，然后以 pdf 格式导出。为了帮助您理解，我制作了代码示例，我尝试将图像放入 html div 中，然后使用 jspdf 将其粘贴到 pdf 中。文本出现在pdf中，但没有图像，那是什么问题？我是初学者，所以请解释一下如何做到这一点。

试试这个链接看看问题：http://www.balkanex.info/test/start.html

代码如下：

start.html

<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="runner.js" charset="utf-8"></script>
    <script type="text/javascript" src="script.js" charset="utf-8"></script>
    <script type="text/javascript" src="jspdf/jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="jspdf/jspdf.js"></script>
    <script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script>
    <script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script>
    <script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
    <script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
</head>

<body>
    <input type="button" id="btn" value="PROCEED TO THE NEXT PAGE" onClick="run();pdf();">
</body>
</html>

runner.js

function run() {
    document.write('<div id="myid">This is the image: <img src="button.png" alt="Submit"> </div><br/>');
    document.write('<button id="pdf">Export in pdf</button></div>');
}

script.js

function pdf() {
$(function () {
    var doc = new jsPDF();
    var specialElementHandlers = {
        'body': function (element, renderer) { 
            return true;
        }};
    $('#pdf').click(function () {
        doc.fromHTML($('#myid').html(), 15, 35, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample.pdf');
    });
});
}

【问题讨论】：

标签： javascript html jspdf

【解决方案1】：

你使用的jspdf库不支持部分utf-8字母，所以建议你使用其他一些lib（比如Mozilla的pdf.js），避免这些问题。

另一方面，如果你决定使用这个 - 那么我必须为每个变量创建一个数组来保存字符串，然后用图像替换字符。

【讨论】：

请注意 Mozilla 的 pdf.js reads PDF，而 jsPDF writes。