Print in ASP.NET Core DOCX Editor

14 Aug 202610 minutes to read

To print the document, use the print method from the ASP.NET Core DOCX Editor (Document Editor) instance.

<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();
}
<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();
}

NOTE

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

Improve print quality

The Document Editor provides an option to improve the print quality using printDevicePixelRatio in the Document Editor settings. The Document Editor uses a canvas approach to render content. The canvas is then converted to an image and processed for printing. Using the printDevicePixelRatio API, you can increase the image quality based on your requirements.

<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true height="590px">
</ejs-documenteditorcontainer>

<script>
    var settings = { printDevicePixelRatio: 2 };
</script>

NOTE

By default, printDevicePixelRatio value is 1.

You can print the document in the Document Editor by passing the window instance. This is useful for implementing print in third-party frameworks such as Electron, where the window instance is not available.

<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 browser print options (such as headers, footers, and background graphics) cannot be configured using JavaScript.

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

<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, paper, and layouts, the document layout will change in the Document Editor. To modify these options during the print operation, serialize the document as SFDT using the serialize method on a Document Editor instance and open the SFDT data in another Document Editor instance in a separate window.

<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();
}

Online Demo

Explore how to print Word documents using the ASP.NET Core Document Editor in this live demo here.

See Also