ejPrint

A flexible widget that allows the user to print a complete page or a particular element in it with the required customizations.

Syntax

  • js
  • $(element).ejPrint();

    Example

  • html
  • <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

  • html
  • <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

  • html
  • //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

  • html
  • //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/18.3.0.35/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/18.3.0.35/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

  • html
  • //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

  • html
  • <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

  • html
  • //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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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 Object Returns the Print model
    type string Returns the name of an event
    content Object Returns the printed element

    Example

  • html
  • //beforeStart event for Print
    
        <div id="Grid"></div>
    
        <script>
        $("#Grid").ejPrint ({
        beforeStart: function (args) 
        { 
        //handle the event
        }
        });         
        </script>