ejPrint
11 Jul 201822 minutes to read
A flexible widget that allows the user to print a complete page or a particular element in it with the required customizations.
Syntax
$(element).ejPrint();Example
<div id="Grid"></div>
<script>
$("#Grid").ejPrint();
</script>Requires
- module:jQuery
- module:ej.core
- module:ej.print
Members
append string
Append the custom HTML after the selected content.
Default Value:
- null
Example
<div id="control">
<div id="Grid"></div>
<br />
Print the Grid :
<button class="button" id="print">Print</button>
</div>
<script>
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
columns: ["OrderID", "EmployeeID", "ShipCity", "ShipCountry", "Freight"]
});
$("#print").ejButton({
size: "normal", width: "113px", click: "onPrint"
});
})
</script>
//To make use of append -
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
append: "#Grid"
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("append", "#Grid");
obj.print();
}
}
</script>excludeSelector string
A selector that specifies a particular element to be excluded from printing.
Default Value:
- null
Example
//To set excludeSelector
<div id="Grid"></div>
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
excludeSelector: "#Grid"
});
} else {
var obj = $("#Grid").ejPrint("instance");
obj.option("excludeSelector", "#Grid");
obj.print();
}
}
</script>externalStyles string
Specifies whether the URL of an external stylesheet can be included to customize and print that page.
Default Value:
- null
Example
//To set externalStyles API
<div id="Grid"></div>
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
globalStyles: false,
externalStyles: "http://cdn.syncfusion.com/28.2.3/js/web/flat-azure/ej.web.all.min.css"
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("globalStyles", false);
obj.option("externalStyles", "http://cdn.syncfusion.com/28.2.3/js/web/flat-azure/ej.web.all.min.css");
obj.print();
}
}
</script>docType string
Prepend a docType to the document frame.
Default Value:
- <!doctype html>
Example
//To set docType API
<div id="Grid"></div>
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
docType: "<!doctype html>"
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("docType", "<!DOCTYPE html>");
obj.print();
}
}
</script>globalStyles boolean
Specifies whether the global styles can be applied to the element to be printed.
Default Value:
- true
Example
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
globalStyles: false
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("globalStyles", false);
obj.print();
}
}
</script>height number
Sets the height of the print window.
Default Value:
- 454
Example
//To set the height of the print window
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
height: 500
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("height", 500);
obj.print();
}
}
</script>prepend string
Prepends the custom HTML before the selected content.
Default Value:
- null
Example
<div id="Grid"></div>
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
prepend: "#Grid"
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("prepend", "#Grid");
obj.print();
}
}
</script>printInNewWindow boolean
Allows printing the content in a new window.
Default Value:
- false
Example
<div id="Grid"></div>
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
printInNewWindow:true
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("printInNewWindow",true);
obj.print();
}
}
</script>timeOutPeriod number
Sets the period of time to wait before printing the content.
Default Value:
- 1000
Example
<div id="Grid"></div>
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
timeOutPeriod: 1200
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("timeOutPeriod", 1200);
obj.print();
}
}
</script>title string
Sets the title of the print document.
Default Value:
- null
Example
<div id="Grid"></div>
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
title: "Print Grid"
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("title", "Print Grid");
obj.print();
}
}
</script>width number
Defines the width of the print window.
Default Value:
- 1024
Example
<div id="Grid"></div>
<script>
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint(
{
width: 1500
});
} else {
var obj = $("#Grid").ejPrint("instance")
obj.option("width", 1500);
obj.print();
}
}
</script>Methods
print()
Print the specific page or an element.
Returns:
void
Example
<div id="Grid"></div>
<script>
//Print the particular element
function onPrint(e) {
var gridElement = $("#Grid");
if (!gridElement.hasClass("e-print")) {
$("#Grid").ejPrint();
$("#Grid").ejPrint("print","#print");
} else {
var obj = $("#Grid").ejPrint("instance")
obj.print("#print");
}
}
//Print the current page
function onPrint (e) {
var gridElement = $(document.body);
if (!gridElement.hasClass("e-print")) {
$(document.body).ejPrint();
} else {
obj = $(document.body).ejPrint("instance");
obj.print();
}
}
</script>Events
beforeStart
Event triggers before the document page or an element in it gets printed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set this option as true to cancel the event. |
| model |
|
Returns the Print model |
| type | string | Returns the name of an event |
| content | Object | Returns the printed element |
Example
//beforeStart event for Print
<div id="Grid"></div>
<script>
$("#Grid").ejPrint ({
beforeStart: function (args)
{
//handle the event
}
});
</script>