Vue-cli导出数据为Excel文件

Vue-cli导出数据为Excel文件

第一步：安装3个依赖

npm install xlsx
npm install file-saver
npm install script-loader --dev

第二步：在目录下创建excel文件，将下面两个JS放入文件夹

百度网盘：js文件
提取码：7rm9

第三步：组件中使用

一.单页面使用

1.html

<div class="exportExcel" @click="exportExcel">导出Excel</div>

2.data

data () {
            return{
                tableData:[
                    {"userName":"王一","sex":"男","age":"18","address":"山西"},
                    {"userName":"张三","sex":"女","age":"18","address":"山西"},
                    {"userName":"李四","sex":"女","age":"18","address":"山西"}
                ]
            }
        },

3.methods

methods:{
	exportExcel(){
                require.ensure([], () => {
                    //引入第二步存放在excel下的JS文件
                    const { export_json_to_excel } = require("./excel/Export2Excel");
                    //tHeader为存放excel表头标题的数组
                    const tHeader = ["用户名","性别","年龄","所在地"];
                    //filterVal为tHeader标题对应的键值
                    const filterVal = ["userName","sex","age","address"];
                    //list为要转化为excel文件的数据，是一个数组
                    const list = this.tableData;
                    //用map方法处理list数据
                    const data =list.map(v => filterVal.map(j => v[j]));
                    //自定义excel文件名
                    const fileName="导出数据";
                    export_json_to_excel(tHeader, data,fileName);
                });
            },
 }

二.公共方法全局使用

1.在自定义的global.js内export该方法。

exportExcel(headerNameList,headerValueList,tableData,fileName){
        //headerNameList为存放excel表头标题的数组；
        // headerValueList为headerNameList标题对应的键值；
        // tableData为要转化为excel文件的数据，是一个数组；
        // fileName为自定义excel文件名；
        require.ensure([], () => {
            const { export_json_to_excel } = require("./excel/Export2Excel");
            const tHeader = headerNameList;
            const filterVal = headerValueList;
            const list = tableData;
            const data =list.map(v => filterVal.map(j => v[j]));
            let newFileName=fileName?fileName:"导出数据";
            export_json_to_excel(tHeader, data, newFileName);
        });
    }

2.在vue文件内直接调用该方法

• 1.html
  <div class="exportExcel" @click="exportExcel">导出Excel</div>
• 2.data

data () {
            return{
                tableData:[
                    {"userName":"王一","sex":"男","age":"18","address":"山西"},
                    {"userName":"张三","sex":"女","age":"18","address":"山西"},
                    {"userName":"李四","sex":"女","age":"18","address":"山西"}
                ]
            }
        },

• 3.methods

exportExcel(){
                let headerNameList=["用户名","性别","年龄","所在地"];
                let headerValueList=["userName","sex","age","address"];
                let tableData=this.tableData;
                let fileName="成员花名册";
                this.global.exportExcel(headerNameList,headerValueList,tableData,fileName)
            }