图像未使用 jsPDF 在 PDF 上呈现？

Posted 2023-03-28

【中文标题】图像未使用 jsPDF 在 PDF 上呈现？

【英文标题】：Image not rendering on PDF using jsPDF?

【发布时间】：2015-06-29 16:42:01

【问题描述】：

我已包含以下文件：

<script type="text/javascript" src="libs/png_support/zlib.js"></script>
<script type="text/javascript" src="libs/png_support/png.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.png_support.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.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>
<script type="text/javascript" src="jspdf.js"></script>

我只是在测试它是否可以通过 html 渲染图像：

var doc = new jsPDF();
   var elementHandler = 
     '#ignorePDF': function (element, renderer) 
       return true;
     
   ;
   var source = '<img src="/assets/common/image/BG.jpg"/>';
   doc.fromHTML(
       source,
       15,
       15,
       
         'width': 180,'elementHandlers': elementHandler
       );

   doc.output("dataurlnewwindow");

它在控制台上抛出此错误：

jsPDF Warning: rendering issues? provide a callback to fromHTML! (anonymous function)

我使用了PNG格式，因为它不起作用我也尝试了JPG格式，仍然没有运气！ 我究竟做错了什么？ 提前致谢。

【参考方案1】：

为 fromHTML() 增加一个参数

doc.fromHTML(
    source,
    15,
    15, 
        'width': 180,
        'elementHandlers': elementHandler
    ,

    function(dispose) 
        // dispose: object with X, Y of the last line add to the PDF
        //          this allow the insertion of new lines after html
        // pdf.save('Test.pdf');

        if (navigator.msSaveBlob) 
            var string = doc.output('datauristring');
         else 
            var string = doc.output('bloburi');
        

        $('.previewIFRAME').attr('src', string);
    )

【讨论】：

pdf 在var string = pdf.output('bloburi');中未定义

我没有再收到错误了，所以它确实改变了一些东西，但是生成的 PDF 是空白的。

@klihelp 即使我遇到了与问题陈述相同的问题，你能帮我看看你是如何让它为你工作的吗？似乎 from_html 对 css 的支持有限..这是问题所在吗？

我终于改用wkhtmltopdf了，它是开源的，解决了目的。