Print in Vue Document editor component

11 Jun 202423 minutes to read

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

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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
        <div>
            <button v-on:click='print'>Print</button>
        </div>
        <ejs-documenteditor ref="documenteditor" :enablePrint='true' height="370px" style="width: 100%;">
        </ejs-documenteditor>
    </div>
</template>
<script setup>
import { provide, onMounted, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Print } from '@syncfusion/ej2-vue-documenteditor';

const documenteditor = ref(null);
provide('DocumentEditor ', [Print]);

const print = function () {
    //Print the content of the Document Editor.
    documenteditor.value.print();
}

onMounted(function () {
    let sfdt = `{
                "sections": [
                    {
                        "blocks": [
                            {
                                "inlines": [
                                    {
                                        "characterFormat": {
                                            "bold": true,
                                            "italic": true
                                        },
                                        "text": "Hello World"
                                    }
                                ]
                            }
                        ],
                        "headersFooters": {
                        }
                    }
                ]
            }`;
    //Open default document in Document Editor.
    documenteditor.value.open(sfdt);
})

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
    <div id="app">
        <div>
            <button v-on:click='print'>Print</button>
        </div>
        <ejs-documenteditor ref="documenteditor" :enablePrint='true' height="370px" style="width: 100%;">
        </ejs-documenteditor>
    </div>
</template>
<script>
import { DocumentEditorComponent, Print } from '@syncfusion/ej2-vue-documenteditor';

export default {
    name: "App",
    components: {
        "ejs-documenteditor": DocumentEditorComponent
    },
    data: function () {
        return {
        };
    },
    provide: {
        DocumentEditor: [Print]
    },
    methods: {
        print: function () {
            //Print the content of the Document Editor.
            this.$refs.documenteditor.print();
        }
    },
    mounted: function () {
        let sfdt = `{
                "sections": [
                    {
                        "blocks": [
                            {
                                "inlines": [
                                    {
                                        "characterFormat": {
                                            "bold": true,
                                            "italic": true
                                        },
                                        "text": "Hello World"
                                    }
                                ]
                            }
                        ],
                        "headersFooters": {
                        }
                    }
                ]
            }`;
        //Open default document in Document Editor.
        this.$refs.documenteditor.open(sfdt);
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>

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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
        <div>
            <button v-on:click='print'>Print</button>
        </div>
        <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
            :enableSelection='true' :enableEditorHistory='true' height="370px"
            style="width: 100%;"></ejs-documenteditor>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Print, Editor, Selection, EditorHistory } from '@syncfusion/ej2-vue-documenteditor';

const documenteditor = ref(null);
provide('DocumentEditor', [Print, Editor, Selection, EditorHistory]);

const print = function () {
    //Print the content of the Document Editor.
    documenteditor.value.print();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
    <div id="app">
        <div>
            <button v-on:click='print'>Print</button>
        </div>
        <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
            :enableSelection='true' :enableEditorHistory='true' height="370px"
            style="width: 100%;"></ejs-documenteditor>
    </div>
</template>
<script>
import { DocumentEditorComponent, Print, Editor, Selection, EditorHistory } from '@syncfusion/ej2-vue-documenteditor';

export default {
    name: "App",
    components: {
        "ejs-documenteditor": DocumentEditorComponent
    },
    data: function () {
        return {
        };
    },
    provide: {
        //Inject require modules.
        DocumentEditor: [Print, Editor, Selection, EditorHistory]
    },
    methods: {
        print: function () {
            //Print the content of the Document Editor.
            this.$refs.documenteditor.print();
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>

Improve print quality

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

The following example code illustrates how to improve the print quality in Document editor container.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' :documentEditorSettings='settings'
      height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide } from 'vue';

const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
const settings = { printDevicePixelRatio: 2 };

//Inject require modules.
provide('DocumentEditorContainer', [Toolbar])

</script>
<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' :documentEditorSettings='settings'
      height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
  },
  data() {
    return {
      serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',
      settings: { printDevicePixelRatio: 2 }
    };
  },
  provide: {
    //Inject require modules.
    DocumentEditorContainer: [Toolbar]
  }
}
</script>

Note: By default, printDevicePixelRatio value is 1.

Print using window object

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.

this.$refs.documenteditor.print(window);

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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
      :enableSelection='true' :enableEditorHistory='true' :enablePageSetupDialog='true' height="370px"
      style="width: 100%;"></ejs-documenteditor>
  </div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Print, Editor, Selection, EditorHistory, PageSetupDialog } from '@syncfusion/ej2-vue-documenteditor';
import { onMounted, provide, ref } from 'vue';

const documenteditor = ref(null);
provide('DocumentEditor', [Print, Editor, Selection, EditorHistory, PageSetupDialog]);

onMounted(function () {
  documenteditor.value.showPageSetupDialog();
})

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
      :enableSelection='true' :enableEditorHistory='true' :enablePageSetupDialog='true' height="370px"
      style="width: 100%;"></ejs-documenteditor>
  </div>
</template>
<script>
import { DocumentEditorComponent, Print, Editor, Selection, EditorHistory, PageSetupDialog } from '@syncfusion/ej2-vue-documenteditor';

export default {
  components: {
    'ejs-documenteditor': DocumentEditorComponent
  },
  data: function () {
    return {
    };
  },
  provide: {
    DocumentEditor: [Print, Editor, Selection, EditorHistory, PageSetupDialog]
  },
  mounted: function () {
    this.$refs.documenteditor.showPageSetupDialog();
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>

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.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
        <div>
            <button v-on:click='print'>Print</button>
        </div>
        <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
            :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true' height="370px"
            style="width: 100%;"></ejs-documenteditor>

            <ejs-documenteditor ref="pagesetup_documenteditor" :isReadOnly='false' :enablePrint='true'
            :enableEditor='true' :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true'
            height="370px" style="width: 100%;"></ejs-documenteditor>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Print, Editor, Selection, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';

const documenteditor = ref(null);
const pagesetup_documenteditor = ref(null);
provide('DocumentEditor ', [Print, Editor, Selection, EditorHistory, SfdtExport]);

const print = function () {
    let sfdtData = documenteditor.value.serialize();
    pagesetup_documenteditor.value.open(sfdtData);
    //Set A5 paper size
    pagesetup_documenteditor.value.ej2Instances.selection.sectionFormat.pageWidth = 419.55;
    pagesetup_documenteditor.value.ej2Instances.selection.sectionFormat.pageHeight = 595.30;
    pagesetup_documenteditor.value.print();
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
    <div id="app">
        <div>
            <button v-on:click='print'>Print</button>
        </div>
        <ejs-documenteditor ref="documenteditor" :isReadOnly='false' :enablePrint='true' :enableEditor='true'
            :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true' height="370px"
            style="width: 100%;"></ejs-documenteditor>

            <ejs-documenteditor ref="pagesetup_documenteditor" :isReadOnly='false' :enablePrint='true'
            :enableEditor='true' :enableSelection='true' :enableEditorHistory='true' :enableSfdtExport='true'
            height="370px" style="width: 100%;"></ejs-documenteditor>
    </div>
</template>
<script>
import { DocumentEditorComponent, Print, Editor, Selection, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';

export default {
    name: "App",
    components: {
        "ejs-documenteditor": DocumentEditorComponent
    },
    data: function () {
        return {
        };
    },
    provide: {
        DocumentEditor: [Print, Editor, Selection, EditorHistory, SfdtExport]
    },
    methods: {
        print: function () {
            let sfdtData = this.$refs.documenteditor.serialize();
            this.$refs.pagesetup_documenteditor.open(sfdtData);
            //Set A5 paper size
            this.$refs.pagesetup_documenteditor.ej2Instances.selection.sectionFormat.pageWidth = 419.55;
            this.$refs.pagesetup_documenteditor.ej2Instances.selection.sectionFormat.pageHeight = 595.30;
            this.$refs.pagesetup_documenteditor.print();
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>