239 строки
11 KiB
HTML
239 строки
11 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<title>Essential JS 1 : PDF</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="../scripts/jquery-1.11.3.min.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
<!--[if gte IE 9]><!-->
|
|||
|
|
<script src="../scripts/jquery-3.4.1.min.js"></script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
<script src="../scripts/jquery.easing.1.3.min.js"></script>
|
|||
|
|
<script src="../scripts/jsondata.min.js"></script>
|
|||
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|||
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|||
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div style="width:100%" id="viewer">
|
|||
|
|
<div style="width:100%">
|
|||
|
|
<div id="toolbar" class="e-pdfviewer-toolbarcontainer" style="width:100%">
|
|||
|
|
<p style="float:left;padding:13px;">PDF viewer</p>
|
|||
|
|
<ul style="float:right;padding:2px">
|
|||
|
|
<li id="close">
|
|||
|
|
<span class="e-pdfviewer-icon e-pdfviewer-closefind" id="alertclose" style="position:relative;float:right;padding:8px"></span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="control">
|
|||
|
|
<div id="container"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="content-container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="cols-sample-area">
|
|||
|
|
<div class="tablediv">
|
|||
|
|
<div class="rowdiv">
|
|||
|
|
Click the Create PDF button to view a PDF document generated using pdf template
|
|||
|
|
form, loaded in memory, it’s fields filled with appropriate data by using
|
|||
|
|
Essential PDF. Please note that Adobe Reader or its equivalent is required to view
|
|||
|
|
the resultant document
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="LineSpace">
|
|||
|
|
</div>
|
|||
|
|
<div class="tablediv">
|
|||
|
|
<div class="rowdiv">
|
|||
|
|
<div class="celldiv">
|
|||
|
|
<table style="width:100%">
|
|||
|
|
<tr>
|
|||
|
|
</br>
|
|||
|
|
<td><input type="checkbox" class="nodetext" id="pdfViewer" /><label for="pdfViewer" class="clslab">Open the created PDF document in PDF viewer</label></td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tablediv">
|
|||
|
|
</br>
|
|||
|
|
<button id="viewtemplate">View Template</button>
|
|||
|
|
<div class="rowdiv">
|
|||
|
|
<div class="celldiv">
|
|||
|
|
<table width="100%">
|
|||
|
|
<tr>
|
|||
|
|
</br>
|
|||
|
|
<td class="btnsht" align="left">
|
|||
|
|
<button id="generatedocument">Create PDF</button>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</br>
|
|||
|
|
<label>
|
|||
|
|
Note: The document creation/manipulation functionalities are defined within Web API.
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
$("#pdfViewer").ejCheckBox({ checked: true });
|
|||
|
|
$("#generatedocument").ejButton({
|
|||
|
|
showRoundedCorner: true,
|
|||
|
|
size: "medium"
|
|||
|
|
});
|
|||
|
|
$("#viewtemplate").ejButton({
|
|||
|
|
showRoundedCorner: true,
|
|||
|
|
size: "medium"
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
$('#viewtemplate').click(function () {
|
|||
|
|
if ((document.getElementById("pdfViewer")).checked) {
|
|||
|
|
// Open the created PDF document in PDF viewer
|
|||
|
|
var jsonData = new Object();
|
|||
|
|
jsonData["pdfviewer"] = "true";
|
|||
|
|
var jsonResult = JSON.stringify(jsonData);
|
|||
|
|
($.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
url: window.baseurl + 'api/PDF/GetFormFillTemplate',
|
|||
|
|
crossDomain: true,
|
|||
|
|
contentType: 'application/json; charset=utf-8',
|
|||
|
|
dataType: 'json',
|
|||
|
|
data: jsonResult,
|
|||
|
|
traditional: true,
|
|||
|
|
success: function (data) {
|
|||
|
|
var obj = $("#container").data("ejPdfViewer");
|
|||
|
|
if (obj != null) {
|
|||
|
|
obj.destroy();
|
|||
|
|
}
|
|||
|
|
var viewer = $("#viewer");
|
|||
|
|
viewer.show();
|
|||
|
|
//Referring the theme files
|
|||
|
|
var fileref = document.createElement("link");
|
|||
|
|
fileref.setAttribute("rel", "stylesheet");
|
|||
|
|
fileref.setAttribute("type", "text/css");
|
|||
|
|
fileref.setAttribute("href", "../content/ejthemes/flat-lime-dark/ej.web.all.min.css");
|
|||
|
|
document.getElementsByTagName("head")[0].appendChild(fileref);
|
|||
|
|
$("#toolbar").ejToolbar({ height: "auto" });
|
|||
|
|
//Adding the css properties
|
|||
|
|
var pdfviewerdiv = document.getElementById("container");
|
|||
|
|
pdfviewerdiv.style.height = "96.5%";
|
|||
|
|
pdfviewerdiv.style.width = "100%";
|
|||
|
|
pdfviewerdiv.style.zIndex = 2000;
|
|||
|
|
pdfviewerdiv.style.position = "absolute";
|
|||
|
|
pdfviewerdiv.style.top = "45px";
|
|||
|
|
pdfviewerdiv.style.left = "0px";
|
|||
|
|
//Initializing the PDF viewer
|
|||
|
|
if (data != "") {
|
|||
|
|
$("#container").ejPdfViewer({ serviceUrl: window.baseurl + 'api/PdfViewer', pdfService: ej.PdfViewer.PdfService.Local, documentPath: "GetFormFill" });
|
|||
|
|
}
|
|||
|
|
var viewer = document.getElementById('container_viewerContainer');
|
|||
|
|
viewer.style.background = 'rgba(0,0,0,0.7)';
|
|||
|
|
},
|
|||
|
|
error: function (msg, textStatus, errorThrown) {
|
|||
|
|
alert("error");
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
} else {
|
|||
|
|
// Download the created PDF document without vieweing in PDF viewer
|
|||
|
|
var attr = { action: window.baseurl + "api/PDF/GetFormFillTemplate", method: "post" };
|
|||
|
|
var form = ej.buildTag("form", "", null, attr);
|
|||
|
|
$("body").append(form);
|
|||
|
|
form.submit();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
$('#generatedocument').click(function () {
|
|||
|
|
if ((document.getElementById("pdfViewer")).checked) {
|
|||
|
|
// Open the created PDF document in PDF viewer
|
|||
|
|
var jsonData = new Object();
|
|||
|
|
jsonData["pdfviewer"] = "true";
|
|||
|
|
var jsonResult = JSON.stringify(jsonData);
|
|||
|
|
($.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
url: window.baseurl + 'api/PDF/GenerateFormFillTemplate',
|
|||
|
|
crossDomain: true,
|
|||
|
|
contentType: 'application/json; charset=utf-8',
|
|||
|
|
dataType: 'json',
|
|||
|
|
data: jsonResult,
|
|||
|
|
traditional: true,
|
|||
|
|
success: function (data) {
|
|||
|
|
var obj = $("#container").data("ejPdfViewer");
|
|||
|
|
if (obj != null) {
|
|||
|
|
obj.destroy();
|
|||
|
|
}
|
|||
|
|
var viewer = $("#viewer");
|
|||
|
|
viewer.show();
|
|||
|
|
//Referring the theme files
|
|||
|
|
var fileref = document.createElement("link");
|
|||
|
|
fileref.setAttribute("rel", "stylesheet");
|
|||
|
|
fileref.setAttribute("type", "text/css");
|
|||
|
|
fileref.setAttribute("href", "../content/ejthemes/flat-lime-dark/ej.web.all.min.css");
|
|||
|
|
document.getElementsByTagName("head")[0].appendChild(fileref);
|
|||
|
|
$("#toolbar").ejToolbar({ height: "auto" });
|
|||
|
|
//Adding the css properties
|
|||
|
|
var pdfviewerdiv = document.getElementById("container");
|
|||
|
|
pdfviewerdiv.style.height = "96.5%";
|
|||
|
|
pdfviewerdiv.style.width = "100%";
|
|||
|
|
pdfviewerdiv.style.zIndex = 2000;
|
|||
|
|
pdfviewerdiv.style.position = "absolute";
|
|||
|
|
pdfviewerdiv.style.top = "45px";
|
|||
|
|
pdfviewerdiv.style.left = "0px";
|
|||
|
|
//Initializing the PDF viewer
|
|||
|
|
if (data != "") {
|
|||
|
|
$("#container").ejPdfViewer({ serviceUrl: window.baseurl + 'api/PdfViewer', pdfService: ej.PdfViewer.PdfService.Local, documentPath: "FormFill" });
|
|||
|
|
}
|
|||
|
|
var viewer = document.getElementById('container_viewerContainer');
|
|||
|
|
viewer.style.background = 'rgba(0,0,0,0.7)';
|
|||
|
|
},
|
|||
|
|
error: function (msg, textStatus, errorThrown) {
|
|||
|
|
alert("error");
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
} else {
|
|||
|
|
// Download the created PDF document without vieweing in PDF viewer
|
|||
|
|
var attr = { action: window.baseurl + "api/PDF/GenerateFormFillTemplate", method: "post" };
|
|||
|
|
var form = ej.buildTag("form", "", null, attr);
|
|||
|
|
$("body").append(form);
|
|||
|
|
form.submit();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
$('#alertclose').on("click", function (e) {
|
|||
|
|
$('link[rel=stylesheet][href~="../content/ejthemes/flat-lime-dark/ej.web.all.min.css"]').remove();
|
|||
|
|
$("#viewer").hide();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('body').on("keyup", function (e) {
|
|||
|
|
if (e.keyCode == 27) {
|
|||
|
|
$('link[rel=stylesheet][href~="../content/ejthemes/flat-lime-dark/ej.web.all.min.css"]').remove();
|
|||
|
|
$("#viewer").hide();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
#viewer {
|
|||
|
|
display: none;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0%;
|
|||
|
|
left: 0%;
|
|||
|
|
height: 96.5%;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 1000002;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</body>
|
|||
|
|
</html>
|