vue项目结合element-ui表格添加表格导出功能

vue - vue-json-excel

使用方法

1. npm 安装依赖

npm install vue-json-excel

1. 项目主文件入口main.js全局引入

//excel
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

1. 直接在项目中使用

Name	Type	Description
data	Array	Data to be exported
fields	Object	fields inside the Json Object that you want to export. If no given, all the properties in the Json are exported
export-fields (exportFields)	Object	this prop is used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields
type	string	mime type [xls, csv], default: xls
name	string	filename to export, deault: data.xls
title	string/Array	Title(s) for the data, could be a string or an array of strings (multiple titles)
footer	string/Array	Footer(s) for the data, could be a string or an array of strings (multiple footers)
default-value (defaultValue)	string	Use as fallback when the row has no field values, default: ''
worksheet	string	Name of the worksheet tab. default: 'Sheet1'
fetch	Function	Callback to fetch data before download, if it's set it runs immediately after mouse pressed and before download process. IMPORTANT: only works if no data prop is defined (文件下载前通过接口获取数据,不需要data属性)
before-generate	Function	Callback to call a method right before the generate / fetch data, eg:show loading progress(文件下载前的操作)
before-finish	Function	Callback to call a method right before the download box pops out, eg:hide loading progress(文件下载结束操作)

//有数据,无需点击时获取 必需 data ,fields 属性
 <download-excel :data="json_data" :fields="json_fields" name="filename.xls" >
     <el-button type="warning">导出excel</el-button>
 </download-excel>
 
<script>
export default {
     data () {
     return{
        //excel表格的标题头
        json_fields: {
            'Complete name': 'name',  //excel标题：数据中的key
            'City': 'city',
            'Telephone': 'phone.mobile',
            'Telephone 2' : {
                field: 'phone.landline',
                callback: (value) => {
                    return `Landline Phone - ${value}`;
                }
            },
        },
        //表格数据
        json_data: [
            {
                'name': 'Tony Peña',
                'city': 'New York',
                'country': 'United States',
                'birthdate': '1978-03-15',
                'phone': {
                    'mobile': '1-541-754-3010',
                    'landline': '(541) 754-3010'
                }
            },
            {
                'name': 'Thessaloniki',
                'city': 'Athens',
                'country': 'Greece',
                'birthdate': '1987-11-23',
                'phone': {
                    'mobile': '+1 855 275 5071',
                    'landline': '(2741) 2621-244'
                }
            }
        ],
        json_meta: [
            [
                {
                    'key': 'charset',
                    'value': 'utf-8'
                }
            ]
        ],
    }
 }
}
</script>

//无数据,点击时获取 需要fetch ,fields属性 (有fetch时不需要data属性)

 <download-excel :fetch= "fetchData" :fields="json_fields" :before-generate = "startDownload" :before-finish = "finishDownload"  name="filename.xls"  >
     <el-button type="warning">导出excel</el-button>
 </download-excel>
 
<script>
export default {
     data () {
     return{
        json_fields: {
            'Complete name': 'name',
            'City': 'city',
            'Telephone': 'phone.mobile',
            'Telephone 2' : {
                field: 'phone.landline',
                callback: (value) => {
                    return `Landline Phone - ${value}`;
                }
            },
        },
    }
 },
 methods:{
    async fetchData(){
     const { list } = await this.$store.dispatch("get/infolist", {id : 1});
        return list;
    },
    startDownload(){
        alert('show loading');
    },
    finishDownload(){
        alert('hide loading');
    }
  }
 
}
</script>