使用 jspdf 导出 PDF 不呈现 CSS答案

【问题标题】：Exporting PDF with jspdf not rendering CSS使用 jspdf 导出 PDF 不呈现 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

标签： jquery css rendering jspdf

【解决方案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');        
});

希望对大家有所帮助！

【讨论】：