How to export the Vue Diagram along with background color?

This article explains how to export the Vue Diagram along with a background color. In Vue Diagram control, you can export the diagram in specific formats such as SVG, PNG, and JPG. To export and print the diagram, the PrintAndExport module should be injected into the sample. The diagram can be exported with several export options, such as region, mode, fileName, pageWidth, and more. It can also be exported with a background color set for the diagram. The following code demonstrates how to set the background color dynamically for the diagram page and export the diagram.

App.Vue

<template>
 <div class="control-section">
   <div>
     <ejs-colorpicker id="inline-color-palette" mode="Palette" value="#000" :change="onChange"></ejs-colorpicker>
     <ejs-button v-on:click="btnClick">Export</ejs-button>
     <div>
       <ejs-diagram style="display: block" ref="diagramObj" id="diagram" :width="width" :height="height" :nodes="nodes" :pagesettings="pageSettings"></ejs-diagram>
     </div>
   </div>
 </div>
</template>

       // To render the diagram with background color
         return {
               width: '100%',
               height: '580px',
              nodes: nodes,
              pageSettings: {
                 height: 700,
                width: 1250,
                background: { color: 'transparent' },
          },
          
        // Set the background color using the color picker 
         onChange: function (args) {
             var diagram = document.getElementById('diagram').ej2_instances[0];
             diagram.pageSettings.background = { color: args.currentValue.rgba };
             diagram.dataBind();
          },
          
         // Export the diagram to an image format
          btnClick: function (event) {
             var diagram = document.getElementById('diagram').ej2_instances[0];
             let exportOptions = {};
             exportOptions.mode = 'Download';
             exportOptions.stretch = 'None';
             exportOptions.margin = { left: 20, right: 20, top: 20, bottom: 20 };
             exportOptions.region = 'PageSettings';
             exportOptions.fileName = 'Export';
             exportOptions.pageHeight = 700;
             exportOptions.pageWidth = 1250;
             diagram.exportDiagram(exportOptions);
          },

In the given code, a color picker control is employed to select the color for the diagram background page. When a color is chosen using the color picker, the color picker’s change event is triggered. During this event, the user-selected color is applied to the diagram’s pageSettings background property.
Subsequently, you can click the export button to export the diagram to an image format.

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to export the Vue Diagram along with background color.

You can refer to our Vue Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!