2016-09-15 117 views
1

我看過jsPDF,但插件剝離了導出的PDF中的CSS。我也查看了html2canvas,但是這需要當前窗口的屏幕截圖。我的HTML內容對用戶隱藏,我正在尋找一個解決方案,可以從HTML塊中隨時創建PDF。有什麼建議麼?如何使用Javascript將HTML/CSS轉換爲PDF?

編輯: 我只是嘗試創建html2canvas到jsPDF,但我得到一個空的PDF文檔。有人可以告訴我爲什麼嗎? http://jsfiddle.net/5ud8jkvf/6320/

$('.download').on('click', function(){ 
    html2canvas($('.print'), { 
    onrendered: function(canvas) { 
     $('#canvas').replaceWith(canvas); 
    }, 
    //width: 200, 
    //height: 200 
    }); 
    setTimeout(function(){ 
     var doc = new jsPDF(); 
     var specialElementHandlers = { 
     '#editor': function (element, renderer) { 
      return true; 
     } 
     }; 

    doc.fromHTML($('canvas').html(), 15, 15, { 
     'width': '200', 
      'elementHandlers': specialElementHandlers 
    }); 
    doc.save('sample-file.pdf'); 

    }, 500); 
}); 
+0

http://stackoverflow.com/問題/ 391005/convert-html-css-to-pdf-with-php – Benjamin

+0

沒有簡單的解決方案。您需要在JavaScript中使用完整的Web瀏覽器的一半。我將使用此程序在服務器上生成PDF:http://wkhtmltopdf.org/。 – Michas

回答

2

你能使用html2canvas如下,它不應該的問題,你的HTML內容是隱藏的,你應該能夠訪問它,像這樣:

var pdf = new jsPDF('p', 'pt', 'letter'); 
pdf.addHTML($('#hiddenElement').html(), function() { 
    pdf.save('Test.pdf'); 
}); 
+0

好的,我試了一下 - html2canvas和jsPDF在這裏的組合:http://jsfiddle.net/5ud8jkvf/6320/任何想法爲什麼PDF返回一個空文檔? – ultimatecoder