vue + ant 实现导出功能

1.安装2个依赖包

1. npm install -S file-saver xlsx

2. npm install -D script-loader

2. 在目录保存2个js 文件， 如目录：

js 文件的路径：

3. 在页面的应用

3.1 页面引用js 文件

3.2 在导出按钮调用方法

<a-button @click="exportExcel" v-if="$auth('users.add')" :loading="exportLoadding" >导出</a-button>

exportLoadding 方法

注意： this.exportData 是具体导出的数据结构， 里面数据是什么格式导出内容就是什么格式。

代码：

          exportExcel() {

                this.exportLoadding = true

                require.ensure([], () => {

                    const tHeader = columns.map(v => v.title)

                    // 上面设置Excel的表格第一行的标题

                    const filterVal = columns.map(v => v.dataIndex)

                    // 上面的index、nickName、name是tableData里对象的属性

                    const list = this.exportData // 把data里的tableData存到list

                    const data = this.formatJson(filterVal, list)

                    exportJsonToExcel(tHeader, data, '用户列表')

                })

                this.exportLoadding = false

            },

 

            formatJson(filterVal, jsonData) {

                const jsData = jsonData.map(v => filterVal.map(j => v[j]))

                return jsData

            }

 

js 文件下载地址： 

Blob 和 Export2Excel 文件下载地址

https://download.csdn.net/download/qing12313359/16715802