An Interest In:
Web News this Week
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
- March 12, 2024
- March 11, 2024
September 29, 2022 11:41 am GMT
Original Link: https://dev.to/climentea/simple-way-to-generate-pdf-from-html-21mh
Simple way to generate PDF from HTML
Here is how you can create a pdf from html/css on the client side (no backend or external libraries involved). We will take advantage of the window.print()
and some specific CSS.
Needed styles for the window.print()
function:
* { font-family: Arial, Helvetica, sans-serif; color: rgb(65, 65, 65); -webkit-print-color-adjust: exact !important; color-adjust: exact !important; print-color-adjust: exact !important;}@media print { @page { margin-left: 0.8in; margin-right: 0.8in; margin-top: 0; margin-bottom: 0; }}#container { width: 800px; margin: 0 auto;}
Of course you can set other values for font-family
, color
and #container
. Add the rest of the styles for your custom pdf.
Next we need to trigger the window.print()
function which is native to the browser. So add below js to in a script
tag.
document.addEventListener("DOMContentLoaded", () => { let printLink = document.getElementById("print"); let container = document.getElementById("container"); printLink.addEventListener("click", event => { event.preventDefault(); printLink.style.display = "none"; window.print(); }, false); container.addEventListener("click", event => { printLink.style.display = "flex"; }, false);}, false);
Here is a basic html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Add here the styles and script we described up --> <title>This will be the title of the pdf file</title></head><body id="container"> <a href="#" id="print">GENERATE PDF!</a> <h1>Super cool custom pdf</h1> <p>This pdf is generated from the client side without any external libraries!</p></body></html>
And... that's it!
Here is how what we did up will work:
Original Link: https://dev.to/climentea/simple-way-to-generate-pdf-from-html-21mh
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To