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

希望这对一些人有帮助！

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

Answer 5

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

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

});

Answer 6

设置选项 useCSS:true

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

Answer 7

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

的风格