DEV Community

Cover image for Download Browser Page as PDF using JavaScript
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on

Download Browser Page as PDF using JavaScript

Hello folks, today we will cover how to save our browser page as pdf. We will generate pdf using Vanilla JavaScript. This functionality can be used to generate invoices or receipts for users.
download


Prerequisite

🎯 JavaScript
🎯 HTML
🎯 html2pdf.js CDN


Table Of Contents

♣️ I decide to write the whole code in index.html, feel free to refactor it to your convenience. The invoice template is gotten from Bootsnip written by heidilux. I made a little tweaking to the template to tailor it to this project.

🎯 First of all, add the html2pdf CDN script to the head of your HTML boilerplate.
carbon

🎯 Also, add this to the head

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

🎯 Next, Let's flesh out our div container in index.html that holds all the data contained in the invoice.
📝 Ensure you wrap the content to display in the div.

carbon (1)

🎯 We write our button onclick event

    <button onclick="generatePDF()">Generate Invoice</button>
Enter fullscreen mode Exit fullscreen mode

🎯 Lastly, we write our JavaScript function.

<script>
    function generatePDF() {
        const element = document.getElementById('invoice');
        html2pdf()
            .from(element)
            .save();

    }
</script>

Enter fullscreen mode Exit fullscreen mode

Click on the Generate Invoice button to test.

Conclusion

I hope this post has been helpful and thought you how to generate pdf. Leave a comment below if you have better ways to generate pdf using JavaScript.


Resources

🍄Video Reference by Code with Voran

Learn how to send mail📬 using Web Socket 👇

Send mail using NodeJS

Back to top

GitHub logo drsimplegraffiti / drsimplegraffiti

Config files for my GitHub profile.

Discussion (4)

Collapse
voranzov profile image
voranzov

Thank you for referring my YouTube video (Code with Voran).

Collapse
drsimplegraffiti profile image
Abayomi Ogunnusi Author

@voranzov you are welcome

Collapse
drsimplegraffiti profile image
Abayomi Ogunnusi Author

@ashish Khare... No, I haven't integrated it to download another site. It is just the implementation for developers for their projects. What you seek will be in form of an extension or plugin.

Collapse
hugekontrast profile image
Ashish Khare😎

How have you integrated this to download other sites? I guess the title didn't mention any other, just how to implement downloading facility.
Great tut.