iview表格导出

使用方法

该组件需使用 Vue.js。

1. 先将下载后的文件 table-import-export.min.js 拷贝到项目目录。

2. 在入口文件 main.js 中使用该组件：

import TableImportExport from '@/components/table-import-export/table-import-export.min';
Vue.use(TableImportExport); 

3. 使用导入功能时，要配合上传组件 Upload，在选择文件后，通过 prop： beforeUpload 拿到文件实例，例如：

<template>
    <div>
        <Table border :columns="columns" :data="data"></Table>
        <Upload action="/" :before-upload="beforeUpload">
            <Button icon="ios-cloud-upload-outline">选择文件</Button>
        </Upload>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                columns: [],
                data: []
            }
        },
        methods: {
            beforeUpload (file) {
                this.$Table.import({
                    type: 'xlsx',
                    file: file,
                    finish: (res) => {
                        this.columns = res.columns;
                        this.data = res.data;
                    }
                });
                return false;
            }
        }
    }
</script> 

4. 因为文件太大，webpack 无法编译，因此要在 vue.config.js 中忽略对该文件的编译，修改后重启 webpack：

// 不编译 iView Pro
config.module
    .rule('js')
    .test(/\.jsx?$/)
    .exclude
    .add(resolve('src/libs/iview-pro'))
    .end();
// 不编译插件
config.module
    .rule('js')
    .test(/\.jsx?$/)
    .exclude
    .add(resolve('src/components/table-import-export'))
    .end(); 

5. 使用导出功能，需要指定导出数据的表头和具体行数据，其它可配置项见 API。示例：

<template>
    <div>
        <Table border :columns="columns" :data="data"></Table>
        <Button type="primary" @click="exportXLSX">导出 XLSX</Button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                columns: [],
                data: []
            }
        },
        methods: {
            exportXLSX () {
                this.$Table.export({
                    type: 'xlsx',
                    fileName: '新数据表',
                    columns: this.columns,
                    data: this.data
                });
            }
        }
    }
</script> 

API

导入 $Table.import：

• file：File 选取的文件
• type：String 文件类型，可选值为 csv 和 xlsx
• finish：Function 导入完的回调

导出 $Table.export：

• type：String 文件类型，可选值为 csv 和 xlsx
• columns：Array 表头数据
• data：Array 行数据
• fileName：String 导出的文件名，默认为 table
• noHeader：Boolean 不导出表头，默认为 false
• separator：String 数据分隔符，仅限 type 为 csv，默认为 ,
• quoted：String 数据是否加引号，仅限 type 为 csv，默认为 false
• autoWidth：Boolean 单元格是否要自适应宽度，仅限 type 为 xlsx，默认为 true

常见问题

1.为什么导入的 xlsx 文件显示有问题？

导入的文件只适用于简单格式的表格，且第一行为表头，对于复杂的表格是无法识别的。

2.如何在需要时再加载组件？

因为组件文件较大，而且并不是任何地方都需要该功能。可以通过异步加载组件的方法，在需要时再加载该组件。

使用异步加载组件，就无需在 main.js 中导入组件，只需在调用的地方改写，例如：

methods: {
    beforeUpload (file) {
        import('@/components/table-import-export/table-import-export.min').then($Table => {
            $Table.default.Component.import({
                type: 'csv',
                file: file,
                finish: (res) => {
                    this.columns = res.columns;
                    this.data = res.data;
                }
            });
        });
        return false;
    }
}