使用 jspdf 导出 PDF 不呈现 CSS

Question

我正在使用 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 );
})
});

原文由 Alin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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()

原文由 Mihir 发布，翻译遵循 CC BY-SA 4.0 许可协议