将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

回答

相关问题