All Components

Export Options

The Kendo UI LinearGauge allows you to export it to PDF, PNG, or SVG formats.

To implement the desired export options, use the pdfExport, imageExport, or svgExport configuration respectively.

<div id="vueapp" class="vue-app">
    <button @click="pdfExport">Export to PDF</button>
    <button @click="imageExport">Export to Image</button>
    <button @click="svgExport">Export to SVG</button>
    <kendo-lineargauge ref="lineargauge" :scale-min="0"
                        :scale-max="50"
                        :scale-vertical="false">
        <kendo-lineargauge-pointer :value="30" :color="'#ff6358'"></kendo-lineargauge-pointer>
    </kendo-lineargauge>
</div>
Vue.use(GaugesInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        pdfExport: function () {
            var gauge = this.$refs.lineargauge.kendoWidget();
            gauge.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "gauge.pdf",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        },
        imageExport: function () {
            var gauge = this.$refs.lineargauge.kendoWidget();
            gauge.exportImage().done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "gauge.png",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        },
        svgExport: function () {
            var gauge = this.$refs.lineargauge.kendoWidget();
            gauge.exportSVG().done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "gauge.svg",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                });
            });
        },
    }
})
In this article