vue+element 使用Export2Excel导出表格组件

下载表格组件是根据我自己的业务需求来封装的

使用的是vue中 xlsx 的插件，需要安装新的依赖及配置

 

仅供参考 不保证和你百分百匹配

 

 

安装依赖

npm install -S file-saver xlsx

npm install -D script-loader

下载所需js

链接: https://pan.baidu.com/s/170okRAPiWxQrBvlDEpp7SQ 提取码: gsf5 

百度网盘真特喵的是个好东西啊

因为我的子组件引用了该js 如果你不想自己再修改位置，可以跟我一样，

在src中，建立excel文件，将下载的js扔进去

 

组件调用

直接说调用部分，文章最后会把组件的代码贴出来

 

父组件引入子组件

import exportTable from '@/components/common/exportTable';

......

components:{

　　exportTable

}

父组件调用子组件

 

　　

 

 参数详解

exportPrepare:{
    percentage: 0, //导出数据完成的百分比
    name:'消耗记录',//导出表格名称
    pageType:'pagination',//导出数据获取方式：offset为偏移量、pagination为分页 默认值为pagination
    limit:200,//单页数据数量 最大值为200 超过200 按200读取（自定义）或 perPage: 200（根据接口参数决定使用limit/perPage，暂时仅支持limit/perPage）
    total:0,//导出数据总数
    json_fields: {  // excel 表头（具体名称根据实际情况而定）
        '耗材编号': 'String',
        '耗材品牌': 'String',
        '耗材类型': 'String',
        '耗材名称': 'String',
        '规格型号': 'String',
        '耗材属性': 'String',
        '耗材价格': 'Number',
        '消耗类型': 'String',
        '消耗地点': 'String',
        '出库仓': 'String',
        '目标设备': 'String',
        '操作人': 'String',
        '操作时间': 'String'
    },
    json_relationship:{ //导出数据对应的字段名称（具体字段根据实际情况而定 key值与表头保持一致）
        '耗材编号': 'supplies_number',
        '耗材品牌': 'brand_name',
        '耗材类型': 'type',
        '耗材名称': 'supplies_name',
        '规格型号': 'spec_name',
        '耗材属性': 'spec_attribute',
        '耗材价格': 'cost',
        '消耗类型': 'supplies_type',
        '消耗地点&