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.
Unfortunately, this will not work on mobile browsers (as pointed out in the comments).
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 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:
Oldest comments (41)
OOh, that is very interesting!!!
keep it up
Nice you have shared a good content!
Didn't know this was possible. Thanks for sharing.
Nice 👍❤️
Kind of a misleading article. This really doesn't have anything to do with generating a PDF - it just tells you how to kick your browser to print the current page. The fact that the print dialog may have an option to "Print to PDF" is entirely separate to anything you are doing here - and will likely be dependent on your browser and system. You'll still have to select 'Print to PDF' manually
But still this is a great article 👍 Keep it up
No, it’s not.
tough crowd
Fixed, modified title. Hopefully it's more clear now.
Would be nice if browsers would have some native api's for pdf generation..
No. It's better this way. There are other ways you can manage "pdfs" while this tool does all of that and much more. i.e. Print as well.
Not everything needs changing. You wrote a good article. Sure had a wrong title, I wont call it misleading personally. Misleading would be when you'd do that knowingly. Just stick to your findings. Don't defend yourself when you find contradicting information proving you wrong. But don't back down either if otherwise.
Happy dev'ing.
Fr. We have Print to PDF in the browser itself. And most modern browsers support it.
Why to use js to toggle print button.
This can be achieved by something like as below
So basically we can assign a new value to css in print selector.
nice one!
And this would be great related to header if u can share, how to programmatically save the pdf which is required to hit by browser pdf action button.
Unfortunately this is not possible with this method..
Amazing!
Never ever style id's in your css. id's are for js only, classes are good for styling. If for some reason you will need the same functionality in other place it will be better to assign a class for it.
The same goes to
!importantnotation. Usually there is no reason to use it because it's hard to override it.I agree, styling id's is not a good practice. The
!importantis needed in this case forwindow.print()otherwise the browser will not show the pdf as in the html page.Very interesting article 👍