iview 自带exel表 导出功能(后缀名为 .csv)需要手动修改

先上效果图：

方法：

<template>
    <div>
        <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
        <br>
        <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                columns8: [
                    { "title": "Name","key": "name","fixed": "left","width": 200},
                    { "title": "Show","key": "show","width": 150,"sortable": true,
                        filters: [
                            {
                                label: 'Greater than 4000',
                                value: 1
                            },
                            {
                                label: 'Less than 4000',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.show > 4000;
                            } else if (value === 2) {
                                return row.show < 4000;
                            }
                        }
                    },
                    { "title": "Weak","key": "weak","width": 150,"sortable": true},
                    { "title": "Signin","key": "signin","width": 150,"sortable": true},
                    { "title": "Click","key": "click","width": 150,"sortable": true},
                ],
                data7: [
                    // {
                    //     "name": "Name1",
                    //     "fav": 0,
                    //     "show": 7302,
                    //     "weak": 5627,
                    //     "signin": 1563,
                    //     "click": 4254,
                    // },
                ]
            }
        },
        methods: {
            exportData (type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: 'The original data'
                    });
                } 
            }      
        },
        created(){
            //模拟接口返回的list 数据替换 tab列表显示
            let historyData = [
                {
                    "name": "Name1",
                    "fav": 0,
                    "show": 7302,
                    "weak": 5627,
                    "signin": 1563,
                    "click": 4254,
                },
                {
                    "name": "Name1",
                    "fav": 0,
                    "show": 7302,
                    "weak": 5627,
                    "signin": 1563,
                    "click": 4254,
                },
                {
                    "name": "Name1",
                    "fav": 0,
                    "show": 7302,
                    "weak": 5627,
                    "signin": 1563,
                    "click": 4254,
                },
                {
                    "name": "Name1",
                    "fav": 0,
                    "show": 7302,
                    "weak": 5627,
                    "signin": 1563,
                    "click": 4254,
                },
                {
                    "name": "Name1",
                    "fav": 0,
                    "show": 7302,
                    "weak": 5627,
                    "signin": 1563,
                    "click": 4254,
                },
                {
                    "name": "Name1",
                    "fav": 0,
                    "show": 7302,
                    "weak": 5627,
                    "signin": 1563,
                    "click": 4254,
                },
            ];
            this.data7 = historyData;
        }
    }
</script>

 

导出csv #

通过调用 exportCsv() 方法，可以将数据导出为 .csv 的表格文件，详见 API。

说明：

• 支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。
• IE9、Safari 需要手动修改后缀名为 .csv。
• IE9暂时只支持英文，中文会显示为乱码。

 

方法二：

  导出排序和过滤后的数据   和   导出自定义数据

方法：

<Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
        <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button> 

else if (type === 2) {
                    this.$refs.table.exportCsv({
                        filename: 'Sorting and filtering data',
                        original: false
                    });
                } else if (type === 3) {
                    this.$refs.table.exportCsv({
                        filename: 'Custom data',
                        columns: this.columns8.filter((col, index) => index < 4),
                        data: this.data7.filter((data, index) => index < 4)
                    });
                }

 

最后注：导出的虽然是excel  但是后缀明不是excel，是csv，如果需要后缀名也是excel，不建议用此方法；

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140