使用jspdf導出PDF不呈現CSS

我使用jspdf.debug.js從網站導出不同的數據，但存在一些問題，我無法在導出的PDF中呈現CSS，如果我有我正在導出的頁面中的圖像，PDF返回空白...使用jspdf導出PDF不呈現CSS

有沒有人知道一種方法來解決這個問題？

這裏是顯示它不是渲染CSS一個jsfiddle

而且我的腳本

$(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); 
}) 
});

來源

2014-09-20 Alin

github關於這個的一些建議的問題在這裏https://github.com/MrRio/jsPDF/issues/91 – Hoto 2016-03-09 11:52:18

據我所知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'); 
});

好運！

編輯：參考here如果你沒有找到addHTML（）

來源

2014-09-22 07:23:32 Mihir

嗯，我會研究它，但據我所見，它只輸出樣式表中的CSS1。嗯，我正在深入研究它。 – Alin 2014-09-23 07:25:29

如何去除黑色背景並提高輸出質量？ – nullpointer 2016-03-30 10:58:39

嗨，由於某種原因，我的印刷PDF只有一半，左邊的一部分。我通過添加腳本來遵循您的指示，使用pdf.addHTML（）而不是pdf.fromHTML（）。任何提示？謝謝 – Windtalker 2016-04-21 21:05:45

-4

要除去黑色的背景只添加背景顏色：白色;風格

來源

2016-04-22 11:43:08 JCristobal

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>

它會很好地工作。

來源

2017-03-28 08:46:34

謝謝你，完美地爲我工作。 – qasimalbaqali 2017-09-05 12:10:55

使用jspdf導出PDF不呈現CSS

回答

相關問題