How to Add Export To Excel/CSV Further For VueJs Table Data

Here I will show how to export table data to excel sheet whit one button click. If we click on the button it will download into local machine, all the Table data.


Here we getting data FROM API and showing on table, as well providing to download all the table data to excel formate...

STEP_1:
npm install --save vue-json-to-csv

STEP_2:
<template>
<div>
 <vue-json-to-csv
                :json-data="items"
                :csv-title="'nodesitems'">
                <button type="button" class="btn btn-primary" style="float:right">
                      Export To Excel <i class="mdi mdi-export-variant" aria-hidden="true"></i>
                </button>
            </vue-json-to-csv>
</div>
<div>
 <b-table :hover="hover"  :striped="striped" :bordered="bordered"
              :small="small" :fixed="fixed"
              responsive="sm" :items="items" :fields="fields"
              :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked" >
            </b-table>

</div>
</template>
STEP_3:
<script>
 import VueJsonToCsv from 'vue-json-to-csv'
export default {
    name: 'NAME',
data: () => {
      return {
        items: [],
fields: [
          {key: 'element1'},
          {key: 'element1'},
          {key: 'element1'},
]
}}

STEP_4:
components: {
      VueJsonToCsv
    },

STEP_5:
 methods: {
        MethodName() {
           axios.get(API)
          .then((response) => {
            this.items = response.data;
}}
}

mounted() {
      this.MethodName() ;
    },
</script>

Comments

Post a Comment

Popular posts from this blog

ERR: error parsing query: found influx, expected SELECT, DELETE, SHOW, CREATE, DROP, EXPLAIN, GRANT, REVOKE, ALTER, SET, KILL at line

I execute the influxdb query like this in CMD SELECT LAST(node) as node, last(node_name) as node_name, last(location) as location," \ " last(shuntVoltage) as shutVoltage, last(loadVoltage) as loadVoltage, " \ "last(current) as current, last(busVoltage) as busVoltage from powers where time>=now()-15m and time<=now()-15m  and node=" getting error: ERR: error parsing query: found influx, expected SELECT, DELETE, SHOW, CREATE, DROP, EXPLAIN, GRANT, REVOKE, ALTER, SET, KILL at line 277 Resolved? SELECT LAST(node) as node, last(node_name) as node_name, last(location) as location," \ " last(shuntVoltage) as shutVoltage, last(loadVoltage) as loadVoltage, " \ "last(current) as current, last(busVoltage) as busVoltage from powers where time>=now()- '15m' and time<=now()-'15m' and node="
Read more

How To Convert Html File/URL/String Into Image Using Python

   I worked on converting HTML formate to PNG Image using python, its take 1 week to complete, First, I tried with  Imgkit  Package then I tried with  Html2image  Package, Later I tried with  Pypperteer  Package, When I used Imgkit package, I faced on one issue what it means, in HTML file we have any embedded code or more loading javascript code, its take more than 5 sec so when I used imgkit it is not taking those things on the image. when I used Html2image Package, I faced the same issue Finally, I solved that loading issue using Pypperteer Package ( https://github.com/pyppeteer/pyppeteer ), In Pypperteer Package we have one option, by using that option we can stop converting into the image until load the complete HTML file, And here we have one more great option to pass HTML string to get Document Elements like OffsetHight, etc. import asyncio from pyppeteer import launch def converting_html_image(input_url) -&gt; str:     file_na...
Read more

How to get Full URL or get absolute url In Django

this is use full to get full url for images or files. getting: [     {          "id" :  1 ,          "photo_url" :  "/media/media/11_sUhP0CC.png"     } ] Need: (after apply below process we get full url) [     {          "id" :  1 ,          "photo_url" :  "http://localhost:8000/media/media/11_sUhP0CC.png"     } ] Existing code: models.py class Car ( models . Model ): name = models . CharField ( max_length = 255 ) price = models . DecimalField ( max_digits = 5 , decimal_places = 2 ) photo = models . ImageField ( upload_to = 'cars' ) serializers.py class CarSerializer ( serializers . ModelSerializer ): class Meta : model = Car fields = ( 'id' ...
Read more