Let’s check out the code to print a dynamic page. To start off you should be having minimum knowledge of jquery CDN , jquery, HTML and CSS. We will discuss the do’s and don’t for printing any dynamic page.
I have used it for MVC to show how to print. You can use to for any language.
Steps to be followed to print a dynamic page.
1.Include the CDN for jquery :
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script src="/jquery/jquery_ui/jquery-ui.min.js"></script>2. Include the CDN for printing.
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.6.0/jQuery.print.js"></script>3.The area or the portion of the page for which you want it to be printed.
The portion of the parent div element for which you want the page to be printed.You can check the example below
<div id="main prevData" class="san-cust-label">
<section id="content" class="animated fadeIn p-t-0" style="padding-bottom:0px !important">
<div class="admin-form">
<div class="form-horizontal">
<div class="wizard clearfix steps-bg steps-justified steps-tabs" role="application" id="steps-uid-0">
<!-- Wizard step 1 start -->
<section class="wizard-section body current admin-form-tab admin-form-tab-one-cust" id="steps-uid-0-p-0" role="tabpanel" aria-labelledby="steps-uid-0-h-0">
<!-- admin-form-tab-one-one-cust start -->
<div class="admin-form-tab-one-cust admin-form-tab-one-one-cust">
<div class="">
<h4 class="h4heading"> Project Details </h4>
<hr class="alt short">
</div>
<div class="row">
<div class="section">
<label for="Customer_Name" class="field-label">Customer Name :</label>
<label for="Customer_Name" class="field prepend-icon">
tenOclocks
</label>
</div>
<div class="section">
<label for="EndCustomer" class="field-label">End Customer :</label>
<label for="EndCustomer" class="field prepend-icon">
web synergies <span class="text-danger"></span>
</label>
</div>
<div class="section">
<label for="Address" class="field-label">Address :</label>
<label for="Address" class="field prepend-icon ">
Hyderabad
</label>
</div>
<div class="section">
<label for="QuotationType" class="field-label">Education :</label>
<label for="QuotationType" class="field prepend-icon">
B.Tech
</label>
</div>
</div>
</div>
<!-- admin-form-tab-one-one-cust end -->
<!-- admin-form-tab-one-second-cust start -->
</section>
</div>
</div>
<!-- End: Wizard -->
</div>
<!-- End Account2 Form -->
</section>
</div>4.Include the CSS required
You can design your custom page or the required block of HTML code so that it can give you a satisfying preview after printing.
<style>
@media print {
@page {
size: landscape;
}
}
.pull-right {
float: right;
}
.mt30 {
margin-top: 30px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
</style>5. To print the page on a button click :
Include a button to whichever area you would like it . And then give a unique id to that button. Keeping the logic that on the click of that unique button it should print our dynamic page.
HTML Button
<div class="col-md-6 pull-right btn-a-cust-header printProposal">
<input type='button' id='printProposal' value='Print'>
</div>The jquery code to print the div block
<script type="text/javascript">
$(function () {
$("#printProposal").click(function () {
$("#prevData").print({
globalStyles: true,
mediaPrint: false,
stylesheet: null,
noPrintSelector: ".printProposal",
iframe: true,
append: null,
prepend: null,
manuallyCopyFormValues: true,
deferred: $.Deferred(),
timeout: 750,
title: null,
doctype: '<!doctype html>'
});
})
})
</script>The full code as a whole :
<!DOCTYPE html>
<html>
<head>
<!-- BEGIN: PAGE SCRIPTS -->
<!-- jQuery -->
<!-- Widget Javascript -->
</head>
<body>
<!-- Start: Main-1 -->
<div id="main prevData" class="san-cust-label">
<!-- Begin: Content -->
<section id="content" class="animated fadeIn p-t-0" style="padding-bottom:0px !important">
<div class="col-md-6 pull-right btn-a-cust-header printProposal">
<input type='button' id='printProposal' value='Print'>
</div>
<div class="admin-form">
<div class="form-horizontal">
<div class="wizard clearfix steps-bg steps-justified steps-tabs" role="application" id="steps-uid-0">
<!-- Wizard step 1 start -->
<section class="wizard-section body current admin-form-tab admin-form-tab-one-cust" id="steps-uid-0-p-0" role="tabpanel" aria-labelledby="steps-uid-0-h-0">
<!-- admin-form-tab-one-one-cust start -->
<div class="admin-form-tab-one-cust admin-form-tab-one-one-cust">
<div class="">
<h4 class="h4heading"> Project Details </h4>
<hr class="alt short">
</div>
<div class="row">
<div class="section">
<label for="Customer_Name" class="field-label">Customer Name :</label>
<label for="Customer_Name" class="field prepend-icon">
tenOclocks
</label>
</div>
<div class="section">
<label for="EndCustomer" class="field-label">End Customer :</label>
<label for="EndCustomer" class="field prepend-icon">
web synergies <span class="text-danger"></span>
</label>
</div>
<div class="section">
<label for="Address" class="field-label">Address :</label>
<label for="Address" class="field prepend-icon ">
Hyderabad
</label>
</div>
<div class="section">
<label for="QuotationType" class="field-label">Education :</label>
<label for="QuotationType" class="field prepend-icon">
B.Tech
</label>
</div>
</div>
</div>
<!-- admin-form-tab-one-one-cust end -->
<!-- admin-form-tab-one-second-cust start -->
</section>
</div>
</div>
<!-- End: Wizard -->
</div>
<!-- End Account2 Form -->
</section>
<script src="/Content/vendor/jquery/jquery-1.11.1.min.js"></script>
<script src="/Content/vendor/jquery/jquery_ui/jquery-ui.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.6.0/jQuery.print.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.6.0/jQuery.print.js"></script>
<script type="text/javascript">
$(function () {
$("#printProposal").click(function () {
// $(".printProposal").hide();
$("#proposalPreviewData").print({
globalStyles: true,
mediaPrint: false,
stylesheet: null,
noPrintSelector: ".printProposal",
iframe: true,
append: null,
prepend: null,
manuallyCopyFormValues: true,
deferred: $.Deferred(),
timeout: 750,
title: null,
doctype: '<!doctype html>'
});
// $("#printProposal").hide() ;
})
//$('.cancel-button').click(function () {
// $(".printProposal").show();
//})
})
</script>
<style>
@media print {
@page {
size: landscape;
}
}
.pull-right {
float: right;
}
.mt30 {
margin-top: 30px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.printProposal {
margin-top: 30px;
padding-right: 15px;
}
input#printProposal {
padding: 4px 10px;
cursor: pointer;
}
/* theme.css start */
h4, .h4, h5, .h5, h6, .h6 {
margin-top: 9.5px;
margin-bottom: 9.5px;
}
@media (min-width: 1100px) {
#content {
padding: 25px 20px 25px 21px;
}
}
body {
position: relative;
min-height: 100%;
background: #eeeeee;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.49;
color: #666666;
margin: 0;
}
hr.short {
margin: 20px 0;
}
hr.alt {
border: 0;
border-top: 1px dashed #cccccc;
}
/* theme.css end */
/* admin-forms css start */
.wizard {
background-color: #FFF;
}
.wizard .wizard-section.body {
padding: 15px;
}
.admin-form {
line-height: 1.231;
font-weight: 400;
font-size: 14px;
color: #626262;
}
.admin-form .section {
margin-bottom: 22px;
}
/* admin-forms css end */
/* popup-cust.css start */
.admin-form-tab-one-cust h4 {
font-size: 20px;
font-weight: bold;
}
.admin-form-tab-one-cust label.field-label {
font-weight: bold !important;
}
.san-cust-label .admin-form .row {
padding: 11px;
padding-top: 0;
padding-bottom: 0;
width: 100%;
display: block;
}
.san-cust-label .admin-form .row .section {
display: inline-block;
margin-right: 30px;
}
.san-cust-label .admin-form .row .prepend-icon {
/* float: left; */
width: auto;
}
.san-cust-label .admin-form .row .field-label {
float: left;
padding-right: 15px;
}
/* admin-form-cust start */
.row strong {
font-weight: bold !important;
}
.admin-form-cust .admin-form .row {
padding: 11px;
padding-top: 0;
padding-bottom: 0;
width: 100%;
display: block;
}
.admin-form-cust .admin-form .row .section {
display: inline-block;
}
.admin-form-cust .admin-form .row .field-label {
float: left;
padding-right: 15px;
font-weight: bold;
}
.admin-form-cust .admin-form .row .prepend-icon {
float: left;
width: auto;
}
/* admin-form-cucst eend */
/* popup-cust.css end */
/* admin-form-tab-one-third-cust start */
.san-cust-label .admin-form .admin-form-tab-one-third-cust .row .section {
margin-right: 15px;
}
/* admin-form-tab-one-fourth-cust end */
/* admin-form-tab-one-fourth-cust start */
.san-cust-label .admin-form .admin-form-tab-one-fourth-cust .row .prepend-icon p {
width: 100%;
display: inline-block;
}
/* admin-form-tab-one-fourth-cust end */
/* admin-form-tab-one-fifth-cust start */
.san-cust-label .admin-form .admin-form-tab-one-fifth-cust .row .section {
margin-right: 15px;
}
/* admin-form-tab-one-fifth-cust end */
/* admin-form-tab-FIRST-cust END */
/* admin-form-tab-SECOND-cust START */
.admin-form-tab-second-cust .table {
width: 100%;
max-width: 100%;
margin-bottom: 0;
border-collapse: collapse;
border-spacing: 0;
}
.admin-form-tab-second-cust {
}
.admin-form-tab-second-cust table.table.table-2-tab-cust, .admin-form-tab-second-cust table.table.table-2-tab-cust > thead > tr > th,
.admin-form-tab-second-cust table.table.table-2-tab-cust > tbody > tr > td {
border: 1px solid #eeeeee;
}
.admin-form-tab-second-cust table.table.table-2-tab-cust th {
background-color: #b6daf2;
color: #196090;
text-align: left;
}
.admin-form-tab-second-cust table.table.table-2-tab-cust th, .admin-form-tab-second-cust table.table.table-2-tab-cust td {
padding: 10px;
}
/* admin-form-tab-SECOND-cust END */
@page {
size: landscape;
}
</style>
<!-- End: Content -->
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"a64e4e7f60c944af940079371b30ff71"}
</script>
<script type="text/javascript" src="https://localhost:65349/bc16dd66aa0543e298d1c9101f45fba9/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
<!-- END: PAGE SCRIPTS -->
</html>This is the easiest way to print a dynamic page without giving much of your time.Hope you liked our article :
Also Read :
Top 10 Medicinal Plants You Can Grow In Your Homes
Top 10 Beverages You Should Give A Try
Top 10 Indian Fruits You Should Never Miss
5 Special Sweets On The Occasion Of Ganesh Chaturthi
Sleep and Emotions Definition In Our Life.