使用 jspdf 导出 PDF 不呈现 CSS

Posted 2023-02-22

【中文标题】使用 jspdf 导出 PDF 不呈现 CSS

【英文标题】：Exporting PDF with jspdf not rendering CSS

【发布时间】：2014-11-14 18:40:10

【问题描述】：

我正在使用 jspdf.debug.js 从网站导出不同的数据，但有一些问题，我无法让它在导出的 PDF 中呈现 CSS，如果我在页面中有图像，我就是导出时，PDF 返回空白...

有人知道解决这个问题的方法吗？

这是一个jsfiddle，显示它没有呈现 CSS

还有我的脚本

$(document).ready(function() 
$('#export').click(function()
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
        filename = 'financiar_' + d + '.pdf',
        pdf = new jsPDF('p', 'pt', 'letter'),
        specialElementHandlers = 
          '#editor': function( element, renderer ) 
              return true;
          
    ;
    pdf.fromhtml(
          $('.export').get(0) // HTML element
        , 25  // x coord
        , 25  // y coord
        , 
              'width': 550 // was 7.5, max width of content on PDF
            , elementHandlers: specialElementHandlers
        
    );
    pdf.save( filename );
)
);

【问题讨论】：

github 问题在这里有一些建议github.com/MrRio/jsPDF/issues/91

【参考方案1】：

据我所知，jsPDF 不适用于 CSS 和我面临的同样问题。

为了解决这个问题，我使用了Html2Canvas。只需添加 HTML2Canvas JS，然后使用 pdf.addHTML() 而不是 pdf.fromHTML()。

这是我的代码（没有其他代码）：

 var pdf = new jsPDF('p', 'pt', 'letter');
 pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () 
     pdf.save('Test.pdf');
 );

祝你好运！

编辑：如果没有找到.addHTML()，请参考this line

【讨论】：

嗯，我会调查它，但据我所知，它只输出样式表中的 CSS1。嗯，我正在深入研究它。

如何去除黑色背景并提高输出质量？

嗨，由于某种原因，我打印的 PDF 只有一半，剩下的部分。我按照您的指示添加了脚本，使用 pdf.addHTML() 而不是 pdf.fromHTML()。有什么提示吗？谢谢

这不适用于长图像。如果图像/内容超过一页。

addHTML 不是函数，我也添加了 HTML2Canvas JS.. 甚至 jspdf 中没有这样的函数..

【参考方案2】：

要删除黑色背景，只需添加 background-color: white;

的风格

【参考方案3】：

jspdf 不能与 css 一起使用，但它可以与 html2canvas 一起使用。您可以将 jspdf 与 html2canvas 一起使用。

在您的页面上的脚本中包含这两个文件：

<script type="text/javascript" src="html2canvas.js"></script>
  <script type="text/javascript" src="jspdf.min.js"></script>
  <script type="text/javascript">
  function genPDF()
  
   html2canvas(document.body,
   onrendered:function(canvas)

   var img=canvas.toDataURL("image/png");
   var doc = new jsPDF();
   doc.addImage(img,'JPEG',20,20);
   doc.save('test.pdf');
   

   );

  
  </script>

您需要下载脚本文件，例如 https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf

在页面上制作可点击按钮，使其生成pdf，并且与原始html页面相同。

<a href="javascript:genPDF()">Download PDF</a>  

它将完美运行。

【参考方案4】：

您可以在以下链接中获取使用 jspdf 实现 css 实现的 html 到 pdf 转换的示例： JSFiddle Link

这是jspdf html到pdf下载的示例代码。

$('#print-btn').click(() => 
    var pdf = new jsPDF('p','pt','a4');
    pdf.addHTML(document.body,function() 
        pdf.save('web.pdf');
    );
)

【讨论】：

这可能是因为在 fiddler 中我们没有太多的访问权限更改背景，但如果您可以在代码上实现相同的功能，您可以使用 css 属性更改背景。

谢谢。虽然生成的 pdf 没有更清晰的字体。这可以解决吗？还是浏览器问题？

谢谢。虽然生成的 pdf 没有更清晰的字体。这可以解决吗？还是浏览器问题？

【参考方案5】：

对@rejesh-yadav 的精彩回答略有改动。

html2canvas 现在返回一个承诺。

html2canvas(document.body).then(function (canvas) 
    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.addImage(img, 'JPEG', 10, 10);
    doc.save('test.pdf');        
);

希望对大家有所帮助！