Search results

Print and Export in Vue Linear Gauge component

Print

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

Source
Preview
app.vue
<template>
   <div>
    <div class="col-md-8 control-section">
    <div class="content-wrapper">
    <div align='center'>
    <ejs-button id='togglebtn' isToggle="true" v-on:click.native='clickToggle'></ejs-button>
    <ejs-lineargauge id="container">
    </ejs-lineargauge>
   </div>
  </div>
  </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';

Vue.use(LinearGaugePlugin, ButtonPlugin);
export default {
  data () {
    return {

    }
  },
methods: {
    clickToggle:function(args){
       this.$refs.gauge.ej2Instances.print();
    }
}
};
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}

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

</style>

Export

The rendered linear 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>
    <div class="col-md-8 control-section">
    <div class="content-wrapper">
    <div align='center'>
    <ejs-button id='togglebtn' isToggle="true" v-on:click.native='clickToggle'>
    </ejs-button>
    <ejs-lineargauge id="container" ref='gauge'>
    </ejs-lineargauge>
   </div>
  </div>
  </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';

Vue.use(LinearGaugePlugin, ButtonPlugin);
export default {
  data () {
    return {

    }
  },
methods: {
    clickToggle:function(args){
        this.$refs.gauge.ej2Instances.export('PNG','Gauge');
    }
}
};
</script>
<style>
#content-wrapper {
    padding: 0px !important;
}

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

</style>
Contents
Contents