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

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一起使用.

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

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

它会很完美.

Answer 3

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

希望这对一些人有所帮助！