Print in ASP.NET MVC DOCX Editor

27 Aug 202610 minutes to read

To print the document, use the print method from the DOCX Editor instance.

@Html.EJS().Button("print").Content("Print").Render()
    <div id="documenteditor" style="width:100%;height:100%">
        @Html.EJS().DocumentEditor("container").EnablePrint(true).Render()
    </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();
}
@Html.EJS().Button("print").Content("Print").Render()
    <div id="documenteditor" style="width:100%;height:100%">
        @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePrint(true).EnableSelection(true).EnableSfdtExport(true).Render()
    </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 DOCX Editor instance, set enablePrint as true.

Improve print quality

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

@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
<script>
    var settings = { printDevicePixelRatio :2 };
</script>

By default, the printDevicePixelRatio value is 1.

You can print the document in DOCX 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.

@Html.EJS().Button("print").Content("Print").Render()
<div id="documenteditor">
    @Html.EJS().DocumentEditor("container").EnablePrint(true).Render()
</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.

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

@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePrint(true).EnableSelection(true).EnableSfdtExport(true).EnablePageSetupDialog(true).Render()

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

@Html.EJS().Button("print").Content("Print").Render()
<div id="documenteditor">
    @Html.EJS().DocumentEditor("DocumentEditor1").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnablePrint(true).Render()
    @Html.EJS().DocumentEditor("DocumentEditor2").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnablePrint(true).Render()
</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 MVC DOCX Editor in this live demo here.

See Also