JQuery - Convert HTML to PDF and push to Client
NOTE: IE wont download the PDF but it appears to be something with jsfiddle. It works perfectly on a live environment (see www.evicore.com/jquerypdf.aspx)
HTML
<div id="dvPDFarea">
<div style="padding:8px;border:1px solid orange;background-color:yellow;text-align:center;">
<span style="font-weight:bold;">Welcome to my HTML to PDF Example</span>
</div>
<div style="height:20px;"></div>
<div>
First Name: <input type="text" id="txtFirstName" />
</div>
<div>
Last Name: <input type="text" id="txtLastName" />
</div>
<p>
The logic behind this approach is to first capture all the desired html and pass it to my ASMX Web Service which converts it to a functional PDF and pushes it back to the Client as a download.
</p>
<p>
<div style="font-weight:bold;">Passing Parameters to Format your PDF file</div><div style="padding:8px;margin-left:20px;border:1px solid black;background-color:#FFFFD9;display:inline-block;"><b>orientation</b> - "sets the page orientation"</div><div style="padding:8px;margin-left:40px;"><table style="border-collapse:collapse;"><tbody><tr><td style="background-color:gray;color:white;">usage:</td><td style="padding-left:10px;">\"orientation\":\"portrait\"<br>OR<br>\"orientation\":\"landscape\"</td></tr></tbody></table></div><div style="padding:8px;margin-left:20px;border:1px solid black;background-color:#FFFFD9;display:inline-block;"><b>height</b> - "sets the page height (you can use in, cm, mm or px)"</div><div style="padding:8px;margin-left:40px;"><table style="border-collapse:collapse;"><tbody><tr><td style="background-color:gray;color:white;">usage:</td><td style="padding-left:10px;">\"height\":\"4in\"</td></tr></tbody></table></div><div style="padding:8px;margin-left:20px;border:1px solid black;background-color:#FFFFD9;display:inline-block;"><b>width</b> - "sets the page width (you can use in, cm, mm or px)"</div><div style="padding:8px;margin-left:40px;"><table style="border-collapse:collapse;"><tbody><tr><td style="background-color:gray;color:white;">usage:</td><td...
CSS
span, input, div, tr, th {
font-family: Arial;
}
th {
padding: 6px;
background-color: gray;
border: 1px solid black;
color: white;
}
td {
text-align: left;
padding: 6px;
border: 1px solid black;
}
JavaScript
function AJAXcall(aFunction, spParams) {
if (!jQuery.support.cors) {
jQuery.support.cors = true;
}
var d = $.Deferred();
//https://www.evicore.net/webservices/evicoreservice.asmx/ + aFunction
$.ajax({
crossDomain: true,
contentType: "application/json; charset=utf-8",
url: "http://jhtml2pdf.evicore.net",
data: JSON.stringify(spParams),
type: "POST",
dataType: "json"
})
.done(function (response) {
d.resolve((response.hasOwnProperty('d') ? $.parseJSON(response.d) : response));
})
.fail(function (jqXHR, textStatus, errorThrown) {
if ($.trim(errorThrown) == '') {
/* If this webpage exists in the same Domain as the webService it will throw a weird blank error, so we ignore it */
d.resolve({ 'error': '0' });
} else {
errorThrown = 'Ajax communication failed!\n\n(Error Thrown: "' + errorThrown + '")';
d.resolve({ 'error': '1', 'errorCode': errorThrown });
}
});
return d.promise();
}
var princeHtmlPDF_JSn = {
arrHTML: [],
myURLl: 'https://www.evicore.net/webservices/evicoreservice.asmx/ConvertHTMLtoPDFJS',
myCustomParams: '',
fileNamex: '',
thisSessionID: ''
};
$(document).ready(function () {
$('#dvPDFTelWait').css('opacity', '0.85');
$('#btnConvert').on('click', function () {
var someRandomNum = ((Math.random() * 1e6) | 0);
princeHtmlPDF_JSn.thisSessionID = 'WebSession_' + someRandomNum;
princeHtmlPDF_JSn.fileNamex = 'myPDFJS_' + someRandomNum + '.pdf';
$("input:text").each(function () {
$(this).attr('value', $.trim($(this).val()));
});
var inStyeSheet = '<style>span, input, div, tr, th {font-family: Arial;}' +
'th {padding: 6px;background-color: gray;border: 1px solid black;color: white;}' +
'td {text-align: left;padding: 6px;border: 1px solid...