Skip to content

Instantly share code, notes, and snippets.

@harisrozak
Last active June 27, 2023 07:33
Show Gist options
  • Save harisrozak/50a9c59c775621896dde388df5438426 to your computer and use it in GitHub Desktop.
Save harisrozak/50a9c59c775621896dde388df5438426 to your computer and use it in GitHub Desktop.
Convert HTML to PDF using Javascript
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Convert HTML to PDF using Javascript</title>
</head>
<body>
<h1>Convert HTML to PDF using Javascript</h1>
<button onclick="runPdfRocketNewTab()">Open the PDF in a new tab</button>
<button onclick="runpdfRocketDownload()">Download the PDF file</button>
<script type="text/javascript">
const pdfRocketApiKey = "ABCDE-12345";
const htmlToConvert = "<h1>HTML 2 PDF ROCKET</h1><p>An easy to use web service to convert HTML webpage to PDF</p>";
/**
* html: HTML string to convert to PDF
* savePdf: Callback for saving PDF
* Opens the PDF in a new tab, and returns it as a data URI
*/
function pdfRocketNewTab(html, savePdf) {
var self = this;
self.save = savePdf;
self.req = new XMLHttpRequest();
var url = "https://api.html2pdfrocket.com/pdf";
var apiKey = pdfRocketApiKey;
// Additional parameters can be added here
var data = "apikey=" + apiKey + "&value=" + encodeURIComponent(html);
self.req.onload = function(event) {
const fileURL = URL.createObjectURL(self.req.response);
window.open(fileURL);
// send a callback
self.save(self.req.response);
};
self.req.open("POST", url, true);
self.req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
self.req.responseType = "blob";
self.req.send(data);
}
/**
* html: HTML string to convert to PDF
* savePdf: Callback for saving PDF
* Returns the binary PDF data
*/
function pdfRocketDownload(html, savePdf) {
var self = this;
self.save = savePdf;
self.req = new XMLHttpRequest();
var url = "https://api.html2pdfrocket.com/pdf";
var apiKey = pdfRocketApiKey;
// Additional parameters can be added here
var data = "apikey=" + apiKey + "&value=" + encodeURIComponent(html);
self.req.onload = function(event) {
const fileURL = URL.createObjectURL(self.req.response);
const link = document.createElement('a');
link.href = fileURL;
link.download = "html2pdfrocket-sample.pdf";
link.click();
// send a callback
self.save(self.req.response);
};
self.req.open("POST", url, true);
self.req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
self.req.responseType = "blob";
self.req.send(data);
}
/**
* The trigger for the pdfRocketNewTab function
*/
function runPdfRocketNewTab() {
pdfRocketNewTab(htmlToConvert, (response) => {
console.log("runPdfRocketNewTab", response);
});
}
/**
* The trigger for the pdfRocketDownload function
*/
function runpdfRocketDownload() {
pdfRocketDownload(htmlToConvert, (response) => {
console.log("runpdfRocketDownload", response);
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment