Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 29, 2022 11:41 am GMT

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:

generate-pdf-gif


Original Link: https://dev.to/climentea/simple-way-to-generate-pdf-from-html-21mh

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To