基于vue2在前端实现导出功能（全部导出、查询导出）

1、下载xlsx插件

2、先查出所需导出表的全部数据，将recordsList换成自己的接口，query替换成自己接口的入参字段。

<el-button class="ml10" type="info" size="small" :loading="downloadLoading" icon="el-icon-printer" @click="exportAllExcel">导出</el-button>


//接口查询全部表数据
        exportAllExcel() {
            this.downloadLoading = true //加载状态，防抖处理
            const allData = []; //定义空数组用来装导出的数据
            let query = JSON.parse(JSON.stringify(this.listQuery))
            query.pageSize = this.total
            query.page = 0
//recordsList是list接口，使用方式和获取list一样，但如果有分页需要查出全部数据，通过接口的total进行全部查询
            recordsList(query).then(res => {
                this.downloadLoading = false
                if (res.code == 200) {
                    allData.push(...res.data.list);
//将查到的数据传给导出方法
                    this.exportExcel(allData);
                }
            });
        },

3、引入插件

import FileSaver from 'file-saver';
import XLSX from 'xlsx';

4、处理表格格式

        
//return自定义表头和表列数据，表列数据是所查询出来的表数据，一一对应字段
exportExcel(r) {
//将接收的list(参数r)进行遍历并将赋给data
            const data = r.map((item) => {
                return {
         "表头名称":item.xxxxx
                }
            })
            const worksheet = XLSX.utils.json_to_sheet(data);  // 将JSON数据（data 变量所代表的数据）转换为一个工作表
            const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };  //创建了一个名为workbook的对象，用于表示整个Excel工作簿（也就是一个.xlsx文件的整体结构概念）。
            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  //使用 XLSX 库的 write 方法来将工作簿对象（workbook）转换为特定格式的数据缓冲区（excelBuffer）
            const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });  //创建了一个 Blob 对象，Blob（Binary Large Object，二进制大对象）在 JavaScript 中常用于表示不可变的、原始数据的类文件对象
            FileSaver.saveAs(blob, 'xxx表.xlsx');  //第一个参数 blob 就是要保存的 Blob 数据对象，第二个参数 'xxx表.xlsx' 则是指定了下载后文件在本地保存时的文件名
        },