ASP.NET Core
Demos
Support
Forum
Download
Search results

Print in ASP.NET Core DocumentEditor control

To print the document, use the print method from document editor instance.

Refer to the following example for showing a document and print it.

tagHelper
document-editor.cs
<ejs-button id="print">Print</ejs-button>
<div id="documenteditor" style="width:100%;height:100%">
<ejs-documenteditor enablePrint=true id="container"></ejs-documenteditor>    
</div>

<script>
        var documenteditor;
        document.addEventListener('DOMContentLoaded', function () {
            var documenteditorElement = document.getElementById("container");            
            documenteditor = documenteditorElement.ej2_instances[0];
            documenteditor.resize();
            var sfdt = {
                "sections": [
                    {
                        "blocks": [
                            {
                                "inlines": [
                                    {
                                        "characterFormat": {
                                            "bold": true,
                                            "italic": true
                                        },
                                        "text": "Hello World"
                                    }
                                ]
                            }
                        ],
                        "headersFooters": {
                        }
                    }
                ]
            };

            documenteditor.open(JSON.stringify(sfdt));

            document.getElementById('print').addEventListener('click', function () {
                documenteditor.print();
            });
        }); 
    </script>
public ActionResult Default()
    {
        return View();
    }

Refer to the following example for creating a document and print it.

tagHelper
document-editor.cs
<ejs-button id="print">Print</ejs-button>
<div id="documenteditor" style="width:100%;height:100%">
<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePrint=true enableSfdtExport=true id="container"></ejs-documenteditor>
</div>

<script>
        var documenteditor;
        document.addEventListener('DOMContentLoaded', function () {
            var documenteditorElement = document.getElementById("container");
            documenteditor = documenteditorElement.ej2_instances[0];
            documenteditor.resize();         
            document.getElementById('print').addEventListener('click', function () {
                documenteditor.print();
            });
        }); 
    </script>
public ActionResult Default()
    {
        return View();
    }

To enable print for a document editor instance, set enablePrint as true.

You can print the document in document editor by passing the window instance. This is useful to implement print in third party frameworks such as electron, where the window instance will not be available. Refer to the following example.

tagHelper
<ejs-button id="print">Print</ejs-button>
<div id="documenteditor">
<ejs-documenteditor enablePrint=true id="container"></ejs-documenteditor>    
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.print(window);

    }); 
</script>

Page setup

Some of the print options cannot be configured using JavaScript. Refer to the following links to learn more about the browser page setup:

However, you can customize margins, paper, and layout options by modifying the section format properties using page setup dialog

tagHelper
<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePrint=true enableSfdtExport=true enablePageSetupDialog=true id="container"></ejs-documenteditor>

<script>
    var documenteditor;    
        var documenteditorElement = document.getElementById("container");
        documenteditorElement.style.height = "100%";
        documenteditorElement.style.width = "100%";
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        documenteditor.showPageSetupDialog();    
</script>

By customizing margins, papers, and layouts, the layout of the document will be changed in document editor. To modify these options during print operation, serialize the document as SFDT using the serialize method in document editor instance and open the SFDT data in another instance of document editor in separate window.

The following example shows how to customize layout options only for printing.

tagHelper
document-editor.cs
<ejs-button id="print">Print</ejs-button>
<div id="documenteditor">
<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePrint=true enableSfdtExport=true id="DocumentEditor1"></ejs-documenteditor>
<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enablePrint=true enableSfdtExport=true id="DocumentEditor2"></ejs-documenteditor>    
</div>

<script>
    var documenteditor1;
    var documenteditor2;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor1 = document.getElementById('DocumentEditor1').ej2_instances[0];
        documenteditor2 = document.getElementById('DocumentEditor2').ej2_instances[0];
        documenteditor1.resize();
        documenteditor2.resize();
    });
    document.getElementById('print').addEventListener('click', function () {
        var sfdtData = documenteditor1.serialize();
        documenteditor2.open(sfdtData);
        //Set A5 paper size
        documenteditor2.selection.sectionFormat.pageWidth = 419.55;
        documenteditor2.selection.sectionFormat.pageHeight = 595.30;
        documenteditor2.print();
    });

</script>
public ActionResult Default()
    {
        return View();
    }

See Also

Previous
Next