HTML to PDF JavaScript

Hey guys, today I have HTML to PDF JavaScript Tutorial for you all. Sometimes we need to give our users an option to download documents. You may need this feature for several things; for example, you need to let your users download Invoices, Reports, Charts in PDF Format. Or sometimes, you may even need to let your users download an existing HTML page to PDF Documents. Whatever may be your requirement, the primary thing required here is converting HTML to PDFs. And in this HTML to PDF JavaScript Tutorial, I am going to teach you this thing.

Once you know how you can convert HTML to PDF, you can apply it to all your requirements discussed above.

In this post I will create a very simple web app that will take WebPage URLs, and give you PDF Document by converting them to PDF. So basically we will be using JavaScript.

Table of Contents

1 HTML to PDF JavaScript
2 Tools Required
3 Building an HTML to PDF Converter
4 Deploying your Project

The tool I will be using to make it is called DocRaptor. It is a paid tool, but you can get a Free Trial, and you can convert Unlimited Documents for Free of you do not have any problem with WaterMarked Docs. 😉

If you want to know in advance what exactly we will build in this post, check it below.

I have embedded it here using IFrame, you can check Web 2 PDF Here.

Now, let’s start building it.

Tools Required

Following are the things, that I have used to build that application.

DocRaptor – For converting HTML to PDF
VisualStudio Code – As my code editor (You can use any)
Firebase Hosting – To deploy the application

Building an HTML to PDF Converter

Now, let’s build our project. Basically you just need to create a Folder and it is our project.

Create a folder named public inside your project folder.
Inside the public folder create an HTML file, you can name it anything; but I will recommend naming it index.html
Now let’s design the UI for our tool. I have used Bootstrap here.

<!DOCTYPE html>

<html>

<!--

HTML to PDF JavaScript Tutorial using DocRaptor

www.docraptor.com

-->

<head>

</head>

<body>

</div>

<div>

<h4>Easily Convert HTML to PDF and other formats</h4>

</div>

<div>

<h5>Powered By <a href="https://docraptor.com/">DocRaptor</a></h5>

</div>

<div>

</div>

<br />

</div>

</div>

</body>

</html>

The UI is very simple, we just have an Input Field to get a WebPage URL and then we will convert the given page to PDF.
For converting the URL to PDF we will write some JavaScript; I am using jQuery here to simply my JavaScript code.

$("#btnConvertToPDF").click(function(){

downloadPDF();

});

var downloadPDF = function() {

var url = $("#url").val();

if(url == ""){

alert("Enter a URL")

return;

}

DocRaptor.createAndDownloadDoc("API KEY", {

test: true, // test documents are free, but watermarked

type: "pdf",

document_url: url

});

}

</script>

As you can see I have added DocRaptor JS and jQuery and the rest of the code is absolutely simple.

Not only PDF you can convert the page to other formats as well by changing the type value. Currently it is PDF as we want PDF.

And it is not necessary to pass a web url all the time, you can also pass complete HTML string instead of url. To pass an HTML String we will do it like this.

document_content: "<html></html>"

If you will pass test: true , that means it is free for you, and you will get WaterMarked document.

Deploying your Project

Finally, if you want to deploy your tools for Free, you can use Firebase Hosting as I did. If you want to check a Step by Step guide about using Firebase Hosting then you can check it here.