將HTML轉換爲包含CSS的PDF

我正在尋找一種方法，通過使用jsPDF將我的頁面轉換爲PDF文檔，但現在我無法轉換任何CSS樣式。這只是文字和圖形。將HTML轉換爲包含CSS的PDF

這是我使用的那一刻

var specialElementHandlers = { 
     '#ignorePDF': function (element,renderer) { 
      return true; 
     } 
    }; 

    var doc = new jsPDF(); 

    doc.fromHTML($('#page-with-images').get(0), 20, 20, {'width': 500, 'elementHandlers': specialElementHandlers,}); 
    doc.save("Test.pdf");

的代碼，但結果不是我想要的，因爲沒有包括造型。我該如何解決這個問題？

來源

2016-07-04 Zhihar

您需要應用特定的CSS樣式爲PDF格式。 –

試試這個。

var pdf = new jsPDF('p', 'pt', 'a4'); 
 
pdf.addHTML($("#content"), function() { 
 
    var output = pdf.output("datauristring"); 
 
    alert(output); 
 
    //pdf.output("datauri"); //This will output the PDF in a new window 
 
});

div { 
 
    width: 100%; 
 
    background-color: lightblue; 
 
    padding: 15px; 
 
    border: 2px solid black; 
 
} 
 

 
p { 
 
    background-color: limegreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 
 

 
<body> 
 
    <div id="content"> 
 
    <div> 
 
     <div> 
 
     <div> 
 
      <div> 
 
      <p id="to-pdf">HTML content...</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-07-04 13:18:13 Jorrex

在pdf文檔中只有可見元素（屏幕高度 - 1000px，但元素高度 - 2000px（帶滾動）） – Zhihar

我從來沒有像jsPDF那樣深入過，只是給了你從HTML中創建PDF的代碼。 CSS。我想你應該看看他們的文檔，也許這會給你帶來領先。 – Jorrex

將HTML轉換爲包含CSS的PDF

回答

相關問題