Created
November 19, 2018 22:49
-
-
Save apexdodge/556badd8b4fbf71d3cc566800b52b012 to your computer and use it in GitHub Desktop.
jquery full version
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" | |
crossorigin="anonymous"></script> | |
<style> | |
body { | |
background: #20262E; | |
padding: 20px; | |
font-family: Helvetica; | |
} | |
#banner-message { | |
background: #fff; | |
border-radius: 4px; | |
padding: 20px; | |
font-size: 25px; | |
text-align: center; | |
transition: all 0.2s; | |
margin: 0 auto; | |
width: 500px; | |
} | |
button { | |
background: #0084ff; | |
border: none; | |
border-radius: 5px; | |
padding: 8px 14px; | |
font-size: 15px; | |
color: #fff; | |
} | |
#banner-message.alt { | |
background: #0084ff; | |
color: #fff; | |
margin-top: 40px; | |
width: 200px; | |
} | |
#banner-message.alt button { | |
background: #fff; | |
color: #000; | |
} | |
</style> | |
<script> | |
function printHtmlToPdf(html) { | |
var endpoint = 'https://v2018.api2pdf.com/chrome/html'; | |
var apikey = 'YOUR-API-KEY'; //replace this with your own from portal.api2pdf.com | |
var payload = { | |
"html": html, | |
"inlinePdf": false | |
}; | |
$.ajax({ | |
url: endpoint, | |
method: "POST", | |
dataType: "json", | |
crossDomain: true, | |
contentType: "application/json; charset=utf-8", | |
data: JSON.stringify(payload), | |
cache: false, | |
beforeSend: function (xhr) { | |
/* Authorization header */ | |
xhr.setRequestHeader("Authorization", apikey); | |
}, | |
success: function (data) { | |
console.log(data.pdf); //this is the url to the pdf, do something with it | |
document.getElementById('my_iframe').src = data.pdf; | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
} | |
}); | |
} | |
</script> | |
</head> | |
<body> | |
<div id="banner-message"> | |
<p>Replace apikey variable with your own API key from <a href="https://portal.api2pdf.com" target="_blank">portal.api2pdf.com</a>. | |
See full documentation <a href="https://www.api2pdf.com/documentation">here</a>.</p> | |
<button>Print to PDF</button> | |
</div> | |
<iframe id="my_iframe" style="display:none;"></iframe> | |
</body> | |
<script> | |
// find elements | |
var banner = $("#banner-message") | |
var button = $("button") | |
// handle click and add class | |
button.on("click", function () { | |
var htmlToPrint = '<p>Hello World</p>'; | |
printHtmlToPdf(htmlToPrint); | |
}) | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment