Vue export excel

Download excel file from json data

Get Started (Bắt đầu)

npm i vue-3-export-excel

How to use the library in vue (Cách sử dụng thư viện trong vue)

import { createApp } from 'vue'
import ExportExcel from 'vue-3-export-excel'
const app = createApp(App)
app.use(ExportExcel) 

Example (Ví dụ)

1
2<template>
3  <export-excel
4      :data="dataExcel"
5      :fields="excelFields"
6      :title="`Thông tin cá nhân`"
7      :name="`Thong_tin_ca_nhan_pham_the_chiem.xls`">
8    <button>Download Excel</button>
9  </export-excel>
10</template>
11<script lang="ts" setup>
12const excelFields = {
13  'Tên': 'name',
14  'Tên đăng nhập': 'userName',
15  'Ngày sinh': 'birthDay',
16  'Số điện thoại': 'phoneNumber',
17  'Địa chỉ': 'address',
18  'Địa chỉ facebook': 'facebook'
19}
20const dataExcel = [
21  {
22    name: 'Phạm Thế Chiêm',
23    userName: 'chiempt',
24    birthDay: '27/09/1999',
25    phoneNumber: '0345361887',
26    address: 'Hoài Đức - Hà Nội',
27    facebook: 'https://www.facebook.com/chiem.dieu.18/'
28  }
29]
30</script>

Props

1  headerColor: {

2      type: String,

3      default: '#205737'

4      description: 'Màu header'
5    },

6    disabled: {

7      type: Boolean,

8      default: false,

9      description: 'Không cho phép xuất excel'
10    },

11    type: {

12      type: String,

13      default: 'xls',

14      description: 'Địng dạng xuất file'
15    },

16    data: {

17      type: Array,

18      required: false,

19      default: null,

20      description: 'Dữ liệu table excel'
21    },

22    fields: {

23      type: Object,

24      required: false,

25       description: 'Định nghĩa các trường trong table'
26    },

27    title: {

28      default: null,

29       description: 'Tiêu đề excel'
30    },

31    name: {

32      type: String,

33      default: 'file_excel.xls',

34      description: 'Tên file'
35    }
36