Print in Vue Diagram component

14 Dec 202424 minutes to read

The print method helps to print the diagram as image.

 const options={};
 diagramInstance.print(options);

NOTE

To Print diagram you need to inject PrintAndExport in the diagram.

Print Options

The diagram can be customized while printing using the following properties of printOptions.

The available print options are listed in the table below.

Name	Type	Description
region	enum	Sets the region of the diagram to be printed.
margin	object	Sets the margin of the page to be printed.
stretch	enum	Resizes the diagram content to fill its allocated space and printed.
multiplePage	boolean	Prints the diagram into multiple pages.
pageWidth	number	Sets the page width of the diagram while printing the diagram into multiple pages.
pageHeight	number	Sets the page height of the diagram while printing the diagram into multiple pages.
pageOrientation	enum	Sets the orientation of the page.

Region

Printing particular region of diagram is possible by using the region property of the printOptions.

The following code example illustrates how to print the diagram based on region.

Composition API (~/src/App.vue)

<template>
    <div id="app">
  
      <label for="region">Region: </label>
      <select id="region" ref="regionSelect">
        <option value="PageSettings">PageSettings</option>
        <option value="Content">Content</option>
      </select>
      <button v-on:click="printDiagram">Print</button>
  
      <ejs-diagram id="diagram" ref="diagramObj" :width='width' :height='height' :nodes="nodes"
        :pageSettings="pageSettings"></ejs-diagram>
  
    </div>
  </template>
  
  <script setup>
  import { provide, ref, onMounted } from "vue";
  import { DiagramComponent as EjsDiagram, PrintAndExport } from '@syncfusion/ej2-vue-diagrams';
  
  let diagramInstance;
  let diagramObj = ref(null);
  let regionSelect = ref(null);
  
  //Initialize nodes
  let nodes = [
    {
      id: 'node1',
      width: 100,
      height: 100,
      offsetX: 100,
      offsetY: 100,
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 100,
      offsetX: 300,
      offsetY: 130,
      annotations: [{ content: 'Node 2' }],
    },
  ];
  
  const width = "1000px";
  const height = "590px";
  const pageSettings = { width: 200, height: 200 };
  
  onMounted(function () {
    diagramInstance = diagramObj.value.ej2Instances;
  })
  
  // Function to handle the print button click
  const printDiagram = () => {
    const selectedRegion = regionSelect.value.value;
  
    // Set the print options based on the selected region
    const printOptions = { region: selectedRegion };
    diagramInstance.print(printOptions);
  };
  
  provide('diagram', [PrintAndExport]);
  
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
  </style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <label for="region">Region: </label>
        <select id="region" ref="regionSelect">
            <option value="PageSettings">PageSettings</option>
            <option value="Content">Content</option>
        </select>
        <button v-on:click="printDiagram">Print</button>
        <ejs-diagram id="diagram" ref="diagramObj" :width="width" :height="height" :nodes="nodes"
            :pageSettings="pageSettings"></ejs-diagram>
    </div>
</template>

<script>
import { DiagramComponent, PrintAndExport } from '@syncfusion/ej2-vue-diagrams';

var diagramInstance;
var nodes = [
    {
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{ content: 'Node 1' }],
    },
    {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 130,
        annotations: [{ content: 'Node 2' }],
    },
];

export default {
    name: 'App',
    components: {
        'ejs-diagram': DiagramComponent,
    },
    data() {
        return {
            width: '100%',
            height: '650px',
            nodes: nodes,
            pageSettings: { width: 200, height: 200 },
        };
    },
    methods: {
        // Function to handle the print button click
        printDiagram() {
            const selectedRegion = this.$refs.regionSelect.value;
            // Set the print options based on the selected region
            const printOptions = {
                region: selectedRegion,
            };
            diagramInstance.print(printOptions);
        },
    },
    mounted: function () {
        diagramInstance = this.$refs.diagramObj.ej2Instances;
    },
    provide: { diagram: [PrintAndExport] },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Multiple page

Printing a diagram across multiple pages is possible by setting the multiplePage property of printOptions to true.

The following code example demonstrates how to set multiplePage to true:

Composition API (~/src/App.vue)

<template>
    <div id="app">
  
      <button v-on:click="printDiagram">Print</button>
  
      <ejs-diagram id="diagram" ref="diagramObj" :width='width' :height='height' :nodes="nodes"
        :pageSettings="pageSettings" :snapSettings="snapSettings"></ejs-diagram>
  
    </div>
  </template>
  
  <script setup>
  import { provide, ref, onMounted } from "vue";
  import { DiagramComponent as EjsDiagram, PrintAndExport, SnapConstraints } from '@syncfusion/ej2-vue-diagrams';
  
  let diagramInstance;
  let diagramObj = ref(null);
  
  //Initialize nodes
  let nodes = [
    {
      id: 'node1',
      width: 100,
      height: 50,
      offsetX: 100,
      offsetY: 100,
      style: { strokeColor: '#868686', fill: '#d5f5d5' },
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 75,
      offsetX: 100,
      offsetY: 225,
      shape: { type: 'Basic', shape: 'Diamond' },
      style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
      annotations: [{ content: 'Node 2' }],
    },
    {
      id: 'node3',
      width: 135,
      height: 50,
      offsetX: 400,
      offsetY: 425,
      style: { strokeColor: '#a8a8a8', fill: '#faebee' },
      annotations: [{ content: 'Node 3' }],
    },
    {
      id: 'node4',
      width: 125,
      height: 50,
      offsetX: 400,
      offsetY: 525,
      shape: { type: 'Basic', shape: 'Ellipse' },
      style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
      annotations: [{ content: 'Node 4' }],
    },
  ];
  
  const width = "1000px";
  const height = "590px";
  const snapSettings = { constraints: SnapConstraints.None };
  const pageSettings = {
    width: 300,
    height: 500,
    multiplePage: true,
    showPageBreaks: true,
  };
  onMounted(function () {
    diagramInstance = diagramObj.value.ej2Instances;
  })
  
  // Function to handle the print button click
  const printDiagram = () => {
    const printOptions = {};
    printOptions.mode = 'Data';
    printOptions.region = 'PageSettings';
    printOptions.multiplePage = true;
    printOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 };
    diagramInstance.print(printOptions);
  };
  
  provide('diagram', [PrintAndExport]);
  
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
  </style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <button v-on:click="printDiagram">Print</button>
        <ejs-diagram id="diagram" ref="diagramObj" :width="width" :height="height" :nodes="nodes"
            :pageSettings="pageSettings" :snapSettings="snapSettings"></ejs-diagram>
    </div>
</template>

<script>
import { DiagramComponent, PrintAndExport, SnapConstraints } from '@syncfusion/ej2-vue-diagrams';

var diagramInstance;
var nodes = [
    {
        id: 'node1',
        width: 100,
        height: 50,
        offsetX: 100,
        offsetY: 100,
        style: { strokeColor: '#868686', fill: '#d5f5d5' },
        annotations: [{ content: 'Node 1' }],
    },
    {
        id: 'node2',
        width: 100,
        height: 75,
        offsetX: 100,
        offsetY: 225,
        shape: { type: 'Basic', shape: 'Diamond' },
        style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
        annotations: [{ content: 'Node 2' }],
    },
    {
        id: 'node3',
        width: 135,
        height: 50,
        offsetX: 400,
        offsetY: 425,
        style: { strokeColor: '#a8a8a8', fill: '#faebee' },
        annotations: [{ content: 'Node 3' }],
    },
    {
        id: 'node4',
        width: 125,
        height: 50,
        offsetX: 400,
        offsetY: 525,
        shape: { type: 'Basic', shape: 'Ellipse' },
        style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
        annotations: [{ content: 'Node 4' }],
    },
];

export default {
    name: 'App',
    components: {
        'ejs-diagram': DiagramComponent,
    },
    data() {
        return {
            width: '100%',
            height: '650px',
            nodes: nodes,
            snapSettings: { constraints: SnapConstraints.None },
            pageSettings: {
                width: 300,
                height: 500,
                multiplePage: true,
                showPageBreaks: true,
            },
        };
    },
    methods: {
        // Function to handle the print button click
        printDiagram() {
            const printOptions = {};
            printOptions.mode = 'Data';
            printOptions.region = 'PageSettings';
            printOptions.multiplePage = true;
            printOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 };
            diagramInstance.print(printOptions);
        },
    },
    mounted: function () {
        diagramInstance = this.$refs.diagramObj.ej2Instances;
    },
    provide: { diagram: [PrintAndExport] },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Margin

The margin for the print region can be set using the margin property of the printOptions

Composition API (~/src/App.vue)

<template>
    <div id="app">
  
      <button v-on:click="printDiagram">Print</button>
  
      <ejs-diagram id="diagram" ref="diagramObj" :width='width' :height='height' :nodes="nodes"
        :snapSettings="snapSettings"></ejs-diagram>
  
    </div>
  </template>
  
  <script setup>
  import { provide, ref, onMounted } from "vue";
  import { DiagramComponent as EjsDiagram, PrintAndExport, SnapConstraints } from '@syncfusion/ej2-vue-diagrams';
  
  let diagramInstance;
  let diagramObj = ref(null);
  
  //Initialize nodes
  let nodes = [
    {
      id: 'node1',
      width: 100,
      height: 50,
      offsetX: 100,
      offsetY: 100,
      style: { strokeColor: '#868686', fill: '#d5f5d5' },
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 75,
      offsetX: 100,
      offsetY: 225,
      shape: { type: 'Basic', shape: 'Diamond' },
      style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
      annotations: [{ content: 'Node 2' }],
    },
    {
      id: 'node3',
      width: 135,
      height: 50,
      offsetX: 400,
      offsetY: 425,
      style: { strokeColor: '#a8a8a8', fill: '#faebee' },
      annotations: [{ content: 'Node 3' }],
    },
    {
      id: 'node4',
      width: 125,
      height: 50,
      offsetX: 400,
      offsetY: 525,
      shape: { type: 'Basic', shape: 'Ellipse' },
      style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
      annotations: [{ content: 'Node 4' }],
    },
  ];
  
  const width = "1000px";
  const height = "590px";
  const snapSettings = { constraints: SnapConstraints.None };
  
  onMounted(function () {
    diagramInstance = diagramObj.value.ej2Instances;
  })
  
  // Function to handle the print button click
  const printDiagram = () => {
    const printOptions = {};
    printOptions.margin = { left: 400, top: 100 };
    diagramInstance.print(printOptions);
  };
  
  provide('diagram', [PrintAndExport]);
  
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
  </style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <button v-on:click="printDiagram">Print</button>
        <ejs-diagram id="diagram" ref="diagramObj" :width="width" :height="height" :nodes="nodes"
            :snapSettings="snapSettings"></ejs-diagram>
    </div>
</template>

<script>
import { DiagramComponent, PrintAndExport, SnapConstraints } from '@syncfusion/ej2-vue-diagrams';

var diagramInstance;
var nodes = [
    {
        id: 'node1',
        width: 100,
        height: 50,
        offsetX: 100,
        offsetY: 100,
        style: { strokeColor: '#868686', fill: '#d5f5d5' },
        annotations: [{ content: 'Node 1' }],
    },
    {
        id: 'node2',
        width: 100,
        height: 75,
        offsetX: 100,
        offsetY: 225,
        shape: { type: 'Basic', shape: 'Diamond' },
        style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
        annotations: [{ content: 'Node 2' }],
    },
    {
        id: 'node3',
        width: 135,
        height: 50,
        offsetX: 400,
        offsetY: 425,
        style: { strokeColor: '#a8a8a8', fill: '#faebee' },
        annotations: [{ content: 'Node 3' }],
    },
    {
        id: 'node4',
        width: 125,
        height: 50,
        offsetX: 400,
        offsetY: 525,
        shape: { type: 'Basic', shape: 'Ellipse' },
        style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
        annotations: [{ content: 'Node 4' }],
    },
];

export default {
    name: 'App',
    components: {
        'ejs-diagram': DiagramComponent,
    },
    data() {
        return {
            width: '100%',
            height: '650px',
            nodes: nodes,
            snapSettings: { constraints: SnapConstraints.None },
        };
    },
    methods: {
        // Function to handle the print button click
        printDiagram() {
            const printOptions = {};
            printOptions.margin = { left: 400, top: 100 };
            diagramInstance.print(printOptions);
        },
    },
    mounted: function () {
        diagramInstance = this.$refs.diagramObj.ej2Instances;
    },
    provide: { diagram: [PrintAndExport] },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Page width and Page height

The pageHeight and pageWidth property of printOptions is used to set the size of the printing image. The following example demonstrates how to set the pageWidth and pageHeight.

Composition API (~/src/App.vue)

<template>
    <div id="app">
  
      <button v-on:click="printDiagram">Print</button>
  
      <ejs-diagram id="diagram" ref="diagramObj" :width='width' :height='height' :nodes="nodes"
        :snapSettings="snapSettings"></ejs-diagram>
  
    </div>
  </template>
  
  <script setup>
  import { provide, ref, onMounted } from "vue";
  import { DiagramComponent as EjsDiagram, PrintAndExport, SnapConstraints } from '@syncfusion/ej2-vue-diagrams';
  
  let diagramInstance;
  let diagramObj = ref(null);
  
  //Initialize nodes
  let nodes = [
    {
      id: 'node1',
      width: 100,
      height: 50,
      offsetX: 100,
      offsetY: 100,
      style: { strokeColor: '#868686', fill: '#d5f5d5' },
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 75,
      offsetX: 100,
      offsetY: 225,
      shape: { type: 'Basic', shape: 'Diamond' },
      style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
      annotations: [{ content: 'Node 2' }],
    },
    {
      id: 'node3',
      width: 135,
      height: 50,
      offsetX: 400,
      offsetY: 425,
      style: { strokeColor: '#a8a8a8', fill: '#faebee' },
      annotations: [{ content: 'Node 3' }],
    },
    {
      id: 'node4',
      width: 125,
      height: 50,
      offsetX: 400,
      offsetY: 525,
      shape: { type: 'Basic', shape: 'Ellipse' },
      style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
      annotations: [{ content: 'Node 4' }],
    },
  ];
  
  const width = "1000px";
  const height = "590px";
  const snapSettings = { constraints: SnapConstraints.None };
  
  onMounted(function () {
    diagramInstance = diagramObj.value.ej2Instances;
  })
  
  // Function to handle the print button click
  const printDiagram = () => {
    const printOptions = {};
    printOptions.pageHeight = 700;
    printOptions.pageWidth = 1000;
    diagramInstance.print(printOptions);
  };
  
  provide('diagram', [PrintAndExport]);
  
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
  </style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <button v-on:click="printDiagram">Print</button>
        <ejs-diagram id="diagram" ref="diagramObj" :width="width" :height="height" :nodes="nodes"
            :snapSettings="snapSettings"></ejs-diagram>
    </div>
</template>

<script>
import { DiagramComponent, PrintAndExport, SnapConstraints } from '@syncfusion/ej2-vue-diagrams';

var diagramInstance;
var nodes = [
    {
        id: 'node1',
        width: 100,
        height: 50,
        offsetX: 100,
        offsetY: 100,
        style: { strokeColor: '#868686', fill: '#d5f5d5' },
        annotations: [{ content: 'Node 1' }],
    },
    {
        id: 'node2',
        width: 100,
        height: 75,
        offsetX: 100,
        offsetY: 225,
        shape: { type: 'Basic', shape: 'Diamond' },
        style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
        annotations: [{ content: 'Node 2' }],
    },
    {
        id: 'node3',
        width: 135,
        height: 50,
        offsetX: 400,
        offsetY: 425,
        style: { strokeColor: '#a8a8a8', fill: '#faebee' },
        annotations: [{ content: 'Node 3' }],
    },
    {
        id: 'node4',
        width: 125,
        height: 50,
        offsetX: 400,
        offsetY: 525,
        shape: { type: 'Basic', shape: 'Ellipse' },
        style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
        annotations: [{ content: 'Node 4' }],
    },
];

export default {
    name: 'App',
    components: {
        'ejs-diagram': DiagramComponent,
    },
    data() {
        return {
            width: '100%',
            height: '650px',
            nodes: nodes,
            snapSettings: { constraints: SnapConstraints.None },
        };
    },
    methods: {
        // Function to handle the print button click
        printDiagram() {
            const printOptions = {};
            printOptions.pageHeight = 700;
            printOptions.pageWidth = 1000;
            diagramInstance.print(printOptions);
        },
    },
    mounted: function () {
        diagramInstance = this.$refs.diagramObj.ej2Instances;
    },
    provide: { diagram: [PrintAndExport] },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Page Orientation

pageOrientation of printOptions is used to set the orientation of the page to be printed.

• Landscape - Display with page Width is more than the page Height.
• Portrait - Display with page Height is more than the page width.

The following example shows how to set pageOrientation for the printOptions.

Composition API (~/src/App.vue)

<template>
    <div id="app">
  
      <button v-on:click="printDiagram">Print</button>
  
      <ejs-diagram id="diagram" ref="diagramObj" :width='width' :height='height' :nodes="nodes"
        :snapSettings="snapSettings"></ejs-diagram>
  
    </div>
  </template>
  
  <script setup>
  import { provide, ref, onMounted } from "vue";
  import { DiagramComponent as EjsDiagram, PrintAndExport, SnapConstraints } from '@syncfusion/ej2-vue-diagrams';
  
  let diagramInstance;
  let diagramObj = ref(null);
  
  //Initialize nodes
  let nodes = [
    {
      id: 'node1',
      width: 100,
      height: 50,
      offsetX: 100,
      offsetY: 100,
      style: { strokeColor: '#868686', fill: '#d5f5d5' },
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'node2',
      width: 100,
      height: 75,
      offsetX: 100,
      offsetY: 225,
      shape: { type: 'Basic', shape: 'Diamond' },
      style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
      annotations: [{ content: 'Node 2' }],
    },
    {
      id: 'node3',
      width: 135,
      height: 50,
      offsetX: 400,
      offsetY: 425,
      style: { strokeColor: '#a8a8a8', fill: '#faebee' },
      annotations: [{ content: 'Node 3' }],
    },
    {
      id: 'node4',
      width: 125,
      height: 50,
      offsetX: 400,
      offsetY: 525,
      shape: { type: 'Basic', shape: 'Ellipse' },
      style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
      annotations: [{ content: 'Node 4' }],
    },
  ];
  
  const width = "1000px";
  const height = "590px";
  const snapSettings = { constraints: SnapConstraints.None };
  
  onMounted(function () {
    diagramInstance = diagramObj.value.ej2Instances;
  })
  
  // Function to handle the print button click
  const printDiagram = () => {
    const printOptions = {};
    printOptions.pageOrientation = 'Portrait';
    diagramInstance.print(printOptions);
  };
  
  provide('diagram', [PrintAndExport]);
  
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
  </style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <button v-on:click="printDiagram">Print</button>
        <ejs-diagram id="diagram" ref="diagramObj" :width="width" :height="height" :nodes="nodes"
            :snapSettings="snapSettings"></ejs-diagram>
    </div>
</template>

<script>
import { DiagramComponent, PrintAndExport, SnapConstraints } from '@syncfusion/ej2-vue-diagrams';

var diagramInstance;
var nodes = [
    {
        id: 'node1',
        width: 100,
        height: 50,
        offsetX: 100,
        offsetY: 100,
        style: { strokeColor: '#868686', fill: '#d5f5d5' },
        annotations: [{ content: 'Node 1' }],
    },
    {
        id: 'node2',
        width: 100,
        height: 75,
        offsetX: 100,
        offsetY: 225,
        shape: { type: 'Basic', shape: 'Diamond' },
        style: { strokeColor: '#8f908f', fill: '#e2f3fa' },
        annotations: [{ content: 'Node 2' }],
    },
    {
        id: 'node3',
        width: 135,
        height: 50,
        offsetX: 400,
        offsetY: 425,
        style: { strokeColor: '#a8a8a8', fill: '#faebee' },
        annotations: [{ content: 'Node 3' }],
    },
    {
        id: 'node4',
        width: 125,
        height: 50,
        offsetX: 400,
        offsetY: 525,
        shape: { type: 'Basic', shape: 'Ellipse' },
        style: { strokeColor: '#a8a8a8', fill: '#fef0db' },
        annotations: [{ content: 'Node 4' }],
    },
];

export default {
    name: 'App',
    components: {
        'ejs-diagram': DiagramComponent,
    },
    data() {
        return {
            width: '100%',
            height: '650px',
            nodes: nodes,
            snapSettings: { constraints: SnapConstraints.None },
        };
    },
    methods: {
        // Function to handle the print button click
        printDiagram() {
            const printOptions = {};
            printOptions.pageOrientation = 'Portrait';
            diagramInstance.print(printOptions);
        },
    },
    mounted: function () {
        diagramInstance = this.$refs.diagramObj.ej2Instances;
    },
    provide: { diagram: [PrintAndExport] },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Limitations

Currently, printing diagram with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion Essential® PDF library. This library incorporates the Syncfusion Essential® HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to export Html-and-Native node kb for more information.

See Also

• How to Print multiple diagrams in single click