Я хочу создавать PDF из HTML. Библиотеки, которые я пробовал: print.js, jsPDF
С print.js У меня есть HTML, и я пытаюсь сделать его в PDF, и это удается, но PDF - это только HTML, без CSS. Но это меня не устраивает. Пример примера
<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;
}
Ближайшая вещь к успеху была с jsPDF, где я на этот раз создаю изображение со всеми CSS и затем генерирую из этого изображения PDF. Но проблема в том, что сгенерированный PDF - это просто изображение, и я теряю все метаданные из PDF. Пример примера
<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;
}
Еще одна вещь, которую я попробовал и действительно надеюсь сделать это здесь, потому что мне кажется, что это более чистый вариант, это событие "onbeforeprint" . Здесь, перед вызовом window.print(), "onbeforeprint" активируется. И , если в "onbeforeprint" , PDF уже создан, я хочу как-то получить к нему доступ. Но я не могу понять, как и возможно ли это вообще. Пример примера
<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>
И, наконец, я спрашиваю
Есть ли способ, с помощью print.js или jsPDF, получить не только HTML, но и CSS?
Могу ли я получить двоичный PDF из "onbeforeprint" события или любого другого события javascript?