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（）
，请参阅here

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

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

稍微更改为@ 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');        
    });

希望这对您有所帮助！

Answer 5

要删除黑色背景，只需添加背景色：白色;

的风格

使用jspdf导出PDF而不渲染CSS

5 个答案: