使用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

---

这是一些关于这个问题的建议，可以在以下 github 页面中找到 https://github.com/MrRio/jsPDF/issues/91 - Andrzej Rehmann

@amit-merin的解决方案对我有效。 https://dev59.com/AlQJ5IYBdhLWcg3wT0HJ#54180160 - Murometz80

Amit Merin的解决方案对我有用 https://dev59.com/AlQJ5IYBdhLWcg3wT0HJ#54180160 - Murometz80

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

---

嗯，我会研究一下的，但就我所看到的，它只能输出样式表中的CSS1。嗯，我正在深入挖掘一下。 - Alin

我该如何移除黑色背景并提高输出质量？ - nullpointer

嗨，出于某些原因，我的打印PDF文件只有左半部分。我按照您的指示添加了脚本，使用pdf.addHTML()而不是pdf.fromHTML()。有什么提示吗？谢谢。 - Windtalker

对于长图或者内容超过一页的情况，这种方法不适用。 - TechTurtle

addHTML 不是一个函数，我已经添加了 HTML2Canvas JS ，但在 jspdf 中也没有这样的功能。 - Sunil Chaudhary

Answer 2

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>  

它将完美地工作。

- Bhinal Chauhan

---

但是这种方法不能生成原生的PDF，它只能将图像转换为PDF。 - Usama Ahmed

Answer 3

对@rejesh-yadav的精彩回答稍作修改。

现在，html2canvas返回一个Promise对象。

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');        
});

希望这能对您有所帮助！

- user3180664

Answer 4

你可以通过以下链接获取使用jspdf实现的css样式的html转pdf示例：JSFiddle链接 这是jspdf html转pdf下载的示例代码。

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

- rajesh yadav

---

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

谢谢。虽然生成的PDF文件字体不够清晰，这个问题能修复吗？还是浏览器的问题？ - Aniruddha

谢谢。虽然生成的PDF文件字体不够清晰，这个问题能修复吗？还是浏览器的问题？ - Aniruddha

Answer 5

这是我用来在HTML中添加外部CSS的示例，我有一个外部CSS文件并像平常一样将其链接到HTML中，在javascript文件中获取主要元素，然后通过以下代码生成pdf。

htmlString = document.getElementById("main");
pdf.addHTML(htmlString, function () {
   pdf.save('Test.pdf');

});

- Syed Tabish Ali

Answer 6

设置选项 useCSS:true

在 TypeScript 中： autoTable(doc, { html: '#mytable', useCss:true });

- Kakanda Ali

---

欢迎来到Stack Overflow！虽然这段代码可能解决了问题，但包括解释这段代码是如何解决问题的，以及为什么这样做会帮助提高您的帖子质量，并可能获得更多的赞同。请记住，您的回答是为了未来的读者，而不仅仅是现在提问的人。请[编辑]您的答案，添加解释，并指出适用的限制和假设。 - undefined

Answer 7

如果要移除黑色背景，只需在样式中添加 background-color: white; 即可。

- JCristobal