How trigger browser to make a PDF from HTML using window.print()

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; >

Enter fullscreen mode

Exit fullscreen mode

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);

Enter fullscreen mode

Exit fullscreen mode

Here is a basic html:

  lang="en">  charset="UTF-8">  http-equiv="X-UA-Compatible" content="IE=edge">  name="viewport" content="width=device-width, initial-scale=1.0">  This will be the title of the pdf file   id="container">  href="#" id="print">GENERATE PDF! Super cool custom pdf This pdf is generated from the client side without any external libraries!