Search results

Print and Export in Vue Circular Gauge component

Print

The rendered circular gauge can be printed directly from the browser by calling the method print.

Source
Preview
app.vue
<template>
  <div id="app">
    <div class='wrapper'>
    <ejs-button id='print' isToggle="true" v-on:click.native='clickPrint'>
    </ejs-button>
    <ejs-circulargauge id="gauge" ref="gauge">
    </ejs-circulargauge>
  </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { CircularGaugePlugin } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(CircularGaugePlugin, ButtonPlugin);
export default {
  data () {
    return {

    }
  },
methods: {
    clickPrint:function(args){
        this.$refs.gauge.ej2Instances.print();
    }
}
};
</script>
<style>
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
  }

  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

</style>

Export

The rendered circular gauge can be exported to the following formats using the export method. The input parameters for this method are export type for format and file name of result.

  • JPEG
  • PNG
  • SVG
  • PDF
Source
Preview
app.vue
<template>
  <div id="app">
    <div class='wrapper'>
    <ejs-button id='export' isToggle="true" v-on:click.native='clickExport'></ejs-button>
    <ejs-circulargauge id="gauge" ref="gauge">
    </ejs-circulargauge>
  </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { CircularGaugePlugin } from "@syncfusion/ej2-vue-circulargauge";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(CircularGaugePlugin, ButtonPlugin);
export default {
  data () {
    return {

    }
  },
methods: {
    clickExport:function(args){
        this.$refs.gauge.ej2Instances.export('PNG','Gauge');
    }
}
};
</script>
<style>
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
  }

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

</style>
Contents
Contents