vue-excel-xlsx

Convert your data as an XLSX file

Getting started

1    npm install vue-excel-xlsx --save

OR

1    yarn add vue-excel-xlsx

Import vue-excel-xlsx in your app:

1    import VueExcelXlsx from "vue-excel-xlsx";
2    import Vue from "vue";
3
4    Vue.use(VueExcelXlsx);

Add in your template

1    <vue-excel-xlsx
2        :data="data"
3        :columns="columns"
4        :file-name="'filename'"
5        :file-type="'xlsx'"
6        :sheet-name="'sheetname'"
7        >
8        Download
9    </vue-excel-xlsx>

Add in your script

1        data() {
2            return {
3                columns : [
4                    {
5                        label: "Product",
6                        field: "product",
7                    },
8                    {
9                        label: "Price",
10                        field: "price",
11                        dataFormat: this.priceFormat
12                    },
13                    {
14                        label: "Quantity",
15                        field: "quantity",
16                    },
17                    {
18                        label: "Country",
19                        field: "address.country",
20                    },
21                    {
22                        label: "City",
23                        field: "address.city",
24                    }
25                ],
26                data : [
27                    {
28                        product: "Beverage",
29                        price: 10,
30                        quantity: 2,
31                        address: {
32                            country: 'Armenia',
33                            city: 'Yerevan',
34                        }
35                    },
36                    {
37                        product: "Snack",
38                        price: 12,
39                        quantity: 6,
40                        address: {
41                            country: 'Armenia',
42                            city: 'Yerevan',
43                        }
44                    },
45                    {
46                        product: "Beverage",
47                        price: 10,
48                        quantity: 5,
49                        address: {
50                            country: 'Armenia',
51                            city: 'Yerevan',
52                        }
53                    },
54                    {
55                        product: "Snack",
56                        price: 12,
57                        quantity: 3,
58                        address: {
59                            country: 'Armenia',
60                            city: 'Yerevan',
61                        }
62                    }
63                ],
64            }
65        },
66        methods: {
67            priceFormat(value){
68                return '$ ' + value;
69            }
70        }

Props

Name	Type	Description	Default Value
columns	Array	Columns configuration	[]
data	Array	Rows data	[]
fileName	String	The name of excel file	excel
sheetName	String	The SheetName of excel file	SheetName
fileType	String	The Type of excel file. (xlsx, xls)	xlsx