HTML to PDF in JavaScript using jsPDF

If you are looking for something that can create server side PDF easily then you are at right place. HTML to PDF in JavaScript’s jsPDF is easier than server-side implementation for PDF creation.

PDF creation is one of the most important features in building websites. Which is needed in almost all types of web apps These are some of the PDF creator tools that I have created while providing freelance services for my frequent clients.

This example is for converting HTML files to PDF in JavaScript. And it uses the JSPDF library to build a custom PDF converter tool on the client side.

Folder Structure

The below image shows the file structure of this JavaScript PDF creation of this example. Here is a template directory that you may use this for testing this example script.

Here you can see that a directory node_modules contains all the required dependencies of jspdf. It generates node_modules by running the appropriate npm command. You have to execute the below code in your project file.

npm install jspdf --save

Create UI

create a page Index.php

<HTML>
    <HEAD>
    <TITLE>Convert HTML to Pdf</TITLE>
    <link href="assets/css/style.css" type="text/css" rel="stylesheet" />
    </HEAD>
    <BODY>
        <div id="container">
             
            <div id="html-template">
            <?php require_once __DIR__ . '/Template/template.php'; ?>
            </div>
        <div class="link-container">
        <button class="btn-generate" onclick="HTMLToPDF()">Genrate PDF</button>
            </div>
        </div>
    </BODY>
 
    <script src="./node_modules/jspdf/dist/jspdf.umd.min.js"></script>
 
    <script type="text/javascript"
        src="./node_modules/html2canvas/dist/html2canvas.js"></script>
    <script src="assets/js/convert.js"></script>
    </HTML>

In this the template.php file is included inside the template directory which will show in pdf file.

Template/template.php

<div class="event-detail">
    <h1>DonÔÇÖt wait! Get your tickets to Coffee House New Town today! </h1>
    <h2>YouÔÇÖre invited to Coffee House New Town. Get your tickets now! .</h2>
    <p class="row">
        Event Name:<b>Coffee House New Town
    </p>
    <p class="row">
        Event Date:<br />27 July 2021
    </p>
    <p class="row">
        Time:<br />10:30 PM
    </p>
    <p class="row">
    Venue:<br />Mr I.K. Taneja,<br>Flat 100,<br>Triveni Appartment<br> Pitampur<br>New Delhi 110034
    </p>
     
</div>

assets/css/style.css

This is the style page for index.php ,In this I have done basic styling.

body {
    font-family: Arial;
    color: #211a1a;
    font-size: 0.9em;
    margin: 0 auto;
    line-height: 20px;
}
 
.heading {
    color: #211a1a;
    font-weight: bold;
    font-size: x-large;
    white-space: nowrap;
    margin: 20px auto;
    text-align: center;
}
 
.event-detail {
    background: #ffffff;
    padding: 20px;
    border: #E0E0E0 1px solid;
    border-radius: 3px;
}
 
#container {
    margin: 30px;
}
 
.btn-generate {
    padding: 10px 20px;
    border-radius: 3px;
    margin: 5px 0px;
    display: inline-block;
    cursor: pointer;
    color: #211c1c;
    background-color: #30BCEB ;
    border: #23943d 1px solid;
}
a {
    color: #007bff;
}

assests/js/convert.js

In this file I have written basic code to create PDF.

function HTMLToPDF() {
    const { jsPDF } = window.jspdf;
 
    var doc = new jsPDF('l', 'mm', [1200, 1210]);
    var pdfjs = document.querySelector('#html-template');
 
    doc.html(pdfjs, {
        callback: function(doc) {
            doc.save("htmltopdf.pdf");
        },
        x: 10,
        y: 10
    });
}
Hey folks, I'm Vivek Kumar Pandey, a software engineer with a passion for crafting elegant solutions to complex problems. From the bustling streets of Mumbai to the heart of Bangalore's tech scene, I've journeyed through the world of programming, leaving my mark one line of code at a time. Join me as I continue to explore, innovate, and push the boundaries of what's possible in the digital realm.

This Post Has One Comment

  1. Наша группа квалифицированных мастеров проштудирована выдвинуть вам инновационные приемы, которые не только обеспечивают надежную охрану от холодных воздействий, но и дарят вашему дому стильный вид.
    Мы функционируем с новыми материалами, гарантируя долгосрочный период службы и превосходные результаты. Изолирование внешней обшивки – это не только сбережение на огреве, но и забота о экологической обстановке. Энергосберегающие методы, какие мы применяем, способствуют не только жилищу, но и сохранению природной среды.
    Самое важное: Утепление и штукатурка дома снаружи цена у нас начинается всего от 1250 рублей за кв. м.! Это доступное решение, которое метаморфозирует ваш жилище в действительный тепловой уголок с минимальными расходами.
    Наши пособия – это не всего лишь утепление, это созидание поля, в где все деталь показывает ваш индивидуальный манеру. Мы примем все все твои требования, чтобы сделать ваш дом еще еще более теплым и привлекательным.
    Подробнее на ppu-prof.ru
    Не откладывайте заботу о своем корпусе на потом! Обращайтесь к экспертам, и мы сделаем ваш жилище не только тепличным, но и стильным. Заинтересовались? Подробнее о наших сервисах вы можете узнать на нашем сайте. Добро пожаловать в пространство комфорта и уровня.

Leave a Reply

Your email address will not be published. Required fields are marked *