JavaScript从HTML生成PDF

Question

I want to generate PDF from HTML. 我想从HTML生成PDF。 The libraries I tried are print.js , jsPDF 我尝试的库是print.js ， jsPDF

With print.js I have HTML and trying to make it to PDF and it succeed, but the PDF is only the HTML, without the CSS. 有了print.js我有了HTML，并试图将其制作为PDF，但它成功了，但是PDF只是HTML，没有CSS。 But that does not suit me. 但这不适合我。 Sample example 样例

<table id="printJS-form">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>


<button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
</button>

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

The closest thing to success was with jsPDF , where I create image this time with all css and then generate from that image PDF. 与成功最接近的事情是jsPDF ，我这次用所有CSS创建图像，然后从该图像PDF生成。 But the problem here is that generated PDF is just image and I lose all meta data from the PDF. 但是这里的问题是生成的PDF只是图像，我丢失了PDF中的所有元数据。 Sample example 样例

<body>
  <div id="printJS-form">

   <h3 id='head-color'>Test heading</h3>
   <button id='print-btn'>Start print process</button>
  </div>
</body>

$('#print-btn').click(()=>{
   var pdf = new jsPDF();
    pdf.addHTML(document.body,function() {
    pdf.save('web.pdf');
 });
})

#head-color{
  color: blue;
}

Another thing I tried and really hope to make it here, because it seems cleaner option for me, is with "onbeforeprint" event. 我尝试过并真的希望在这里做的另一件事，因为对我来说似乎更干净的选择是使用“ onbeforeprint”事件。 Here right before window.print() to be called, "onbeforeprint" event is activated. 在要调用的window.print()之前，激活了“ onbeforeprint”事件。 And if in "onbeforeprint" , PDF is already generated I want somehow to access it. 如果在“ onbeforeprint”中 ，已经生成了PDF，我想以某种方式访问它。 But I can`t figure out how and whether it is at all possible. 但是我无法弄清楚它是如何以及是否有可能。 Sample example 样例

<html>
<body onbeforeprint="myFunction()">

<h1>Try to print this document</h1>
<p><b>Tip:</b> Keyboard shortcuts, such as Ctrl+P sets the page to print.</p>
<p><b>Note:</b> The onbeforeprint event is not supported in Safari and Opera.</p>
<button type="button" onclick="printWindow()">
    Print Form
</button>
<script>
function myFunction() {
// get blob pdf
  alert("You are about to print this document!");
}
function printWindow() {
 window.print();
}
</script>

</body>
</html>

And finally I'm asking 最后我问

Is there a way, with print.js or jsPDF, to get not just the html, but the css too? 有没有办法用print.js或jsPDF不仅获取html，而且获取CSS？

Can I get binary PDF from "onbeforeprint" event or any other javascript event? 我可以从“ onbeforeprint”事件或任何其他javascript事件获取二进制PDF吗？

Answer 1

I think you could use Puppeteer to generate a pdf. 我认为您可以使用Puppeteer生成pdf。 I've not tried it but here are some links that demonstrate this approach: 我没有尝试过，但是这里有一些链接演示了这种方法：

JavaScript从HTML生成PDF

问题描述

1 个解决方案

解决方案1
2 2019-07-04 06:16:47

JavaScript从HTML生成PDF

问题描述

1 个解决方案

解决方案1 2 2019-07-04 06:16:47

解决方案1
2 2019-07-04 06:16:47