使用jspdf导出PDF而不渲染CSS

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

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（）

Answer 2

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

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

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

在页面上制作可点击按钮，以便生成pdf，它将与原始html页面相同。

 Download PDF 

它会很完美。

Answer 3

您可以在以下链接上使用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'); }); }) 

Answer 4

要删除黑色背景，只需添加背景颜色：白色; 的风格