Print and export in Vue Circular Gauge component

11 Jun 202414 minutes to read

Print

The Circular Gauge can be printed directly from the browser by calling the print method. More information on the arguments for this method can be found here.

To use the print functionality, inject the Print module using the provide option and set the property allowPrint in the Circular Gauge to true.

<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-button id='print' isToggle="true" v-on:click='clickPrint'> Print
      </ejs-button>
      <ejs-circulargauge id="gauge" ref="gauge" allowPrint="true">
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { CircularGaugeComponent as EjsCirculargauge, Print } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';

const gauge = ref(null);
const clickPrint = function (args) {
  gauge.value.ej2Instances.print();
}

provide('circulargauge', [Print],);

</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>
<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-button id='print' isToggle="true" v-on:click='clickPrint'> Print
      </ejs-button>
      <ejs-circulargauge id="gauge" ref="gauge" allowPrint="true">
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script>
import { CircularGaugeComponent, Print } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';


export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-circulargauge": CircularGaugeComponent
  },
  methods: {
    clickPrint: function (args) {
      this.$refs.gauge.ej2Instances.print();
    }
  },
  provide: {
    circulargauge: [Print],
  }
};
</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>

Export

Image Export

The Circular Gauge can be exported as an image in JPEG, PNG and SVG formats. To use the image export functionality, inject the ImageExport module using the provide option and set the Circular Gauge’s allowImageExport property to true. When the export method is used, the Circular Gauge will be exported as an image. The export method requires the following parameters for image export.

Parameter Description
type Specifies the export type, which accepts values such as JPEG, PNG and SVG for image export.
fileName Specifies the file name of the exported image.
orientation This parameter is not required for image export. So, the value must be null.
allowDownload Specifies whether the exported image file should be downloaded or not. When the value is set to true, the file will be downloaded. When set to false, the base64 string of the file will be returned. This is an optional parameter, with the default value set to true. 
<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-button id='export' isToggle="true" v-on:click='clickExport'> Export </ejs-button>
      <ejs-circulargauge id="gauge" ref="gauge" allowImageExport="true">
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { CircularGaugeComponent as EjsCirculargauge, ImageExport } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';

const gauge = ref(null);
const clickExport = function (args) {
  gauge.value.ej2Instances.export('PNG', 'Gauge');
}

provide('circulargauge', [ImageExport],);

</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>
<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-button id='export' isToggle="true" v-on:click='clickExport'> Export </ejs-button>
      <ejs-circulargauge id="gauge" ref="gauge" allowImageExport="true">
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script>

import { CircularGaugeComponent, ImageExport } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-circulargauge": CircularGaugeComponent
  },
  methods: {
    clickExport: function (args) {
      this.$refs.gauge.ej2Instances.export('PNG', 'Gauge');
    }
  },
  provide: {
    circulargauge: [ImageExport],
  }
};
</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>

The base64 string of the exported image files can only be received using the export method for JPEG and PNG formats. The allowDownload parameter in the export method must be set to false, as explained in the table above.

<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-button id='export' isToggle="true" v-on:click='clickExport'> Export </ejs-button>
      <ejs-circulargauge id="gauge" ref="gauge" allowImageExport="true">
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { CircularGaugeComponent as EjsCirculargauge, ImageExport } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';

const gauge = ref(null);
const clickExport = function (args) {
  gauge.value.ej2Instances.export('PNG', 'Gauge', PdfPageOrientation.Landscape, false).then((data) => {
    document.writeln(data);
  })
}

provide('circulargauge', [ImageExport]);

</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>
<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-button id='export' isToggle="true" v-on:click='clickExport'> Export </ejs-button>
      <ejs-circulargauge id="gauge" ref="gauge" allowImageExport="true">
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script>
import { CircularGaugeComponent, ImageExport } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-circulargauge": CircularGaugeComponent
  },
  data() {
    return {

    }
  },
  methods: {
    clickExport: function (args) {
      this.$refs.gauge.ej2Instances.export('PNG', 'Gauge', PdfPageOrientation.Landscape, false).then((data) => {
        document.writeln(data);
      })
    }
  },
  provide: {
    circulargauge: [ImageExport]
  }
};
</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>

PDF Export

The Circular Gauge can be exported as a PDF document using export method. To use the PDF export functionality, inject the PdfExport module using the provide option and set the Circular Gauge’s allowPdfExport property to true. The export method requires the following parameters for PDF export.

Parameter Description
type Specifies the export type, which accepts values such as PDF for pdf export.
fileName Specifies the file name of the exported PDF document.
orientation Specifies the orientation of the exported PDF document which accepts the values such as Portrait and Landscape. The default value is Portrait.
allowDownload This is an optional parameter, with the default value set to true. This parameter is supported only for the image export. The exported PDF document cannot be returned as base64 string. 
<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-button id='export' isToggle="true" v-on:click='clickExport'> Export </ejs-button>
      <ejs-circulargauge id="gauge" ref="gauge" allowPdfExport="true">
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { CircularGaugeComponent as EjsCirculargauge, PdfExport } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';

const gauge = ref(null);
const clickExport = function (args) {
  gauge.value.ej2Instances.export('PDF', 'Gauge', PdfPageOrientation.Portrait);
}

provide('circulargauge', [PdfExport],);

</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>
<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-button id='export' isToggle="true" v-on:click='clickExport'> Export </ejs-button>
      <ejs-circulargauge id="gauge" ref="gauge" allowPdfExport="true">
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script>

import { CircularGaugeComponent, PdfExport } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-circulargauge": CircularGaugeComponent
  },
  methods: {
    clickExport: function (args) {
      this.$refs.gauge.ej2Instances.export('PDF', 'Gauge', PdfPageOrientation.Portrait);
    }
  },
  provide: {
    circulargauge: [PdfExport],
  }
};
</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>