大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言：在上篇文章中我们说到了：Xlsx结合File-Saver实现前端页面表格导出Excel为文件，但是也有很棘手的问题，只能导出第一页的数据，那么我们今天来看看分页的数据怎么导出- – –

一.表格结构：

 <el-table :data="adminData.slice((admincurrentPage-1)*adminpage,admincurrentPage*adminpage)" :cell-style="{ textAlign: 'center' }" :header-cell-style="{textAlign: 'center',background:'#eef1f6',color:'#606266'}" border style="width: 100%;height: 100%">
        <el-table-column label="序号" width="55">
            <template slot-scope="scope">
                <span>{
  
  {(admincurrentPage - 1) * adminpage + scope.$index + 1}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="_source.user.username" label="用户名" >
        </el-table-column>
        <el-table-column prop="_source.user.print_name" label="昵称" :show-overflow-tooltip="true" >
        </el-table-column>
</el-table>

二.分页结构：

<el-pagination style="float: right" background @current-change="adminhandleCurrentChange" :current-page.sync="admincurrentPage" layout="prev, pager, next" :page-size="adminpage" :total="adminData.length" >
</el-pagination>

三.js逻辑代码：

daochu2() { 
   
     var that = this;
     that.$message({ 
   
         type: 'success',
         message: `数据导出中...`
     });
     this.adminpage=this.adminData.length;
     this.admincurrentPage=1;
     // 导出的内容只做解析，不进行格式转换
     this.$nextTick(function () { 
   
         let xlsxParam = { 
   raw: true};
         let wb = XLSX.utils.table_to_book(document.querySelector(".data-telegram"), xlsxParam);
         const wbout = XLSX.write(wb, { 
   
             bookType: "xlsx",
             bookSST: true,
             type: "array"
         });
         try { 
   
             FileSaver.saveAs(new Blob([wbout], { 
   type: "application/octet-stream"}), '信息表.xlsx');
         } catch (e) { 
   
             if (typeof console !== "undefined") console.log(e, wbout);
         }
         this.adminpage=10;
         this.admincurrentPage=1;
         return wbout;
     });
},

四.代码解析：

主要的就是以下几行代码：

1. this.adminpage代表的是我们分页每页的数据，我们定义为数据的总长度，就会导出数据的所有值
2. this.admincurrentPage代表的是当前为第几页

 this.adminpage=this.adminData.length;
 this.admincurrentPage=1;

导出之后我们需要一下的代码进行复原：将其重新定义为页面显示的数据，一页为10条；

this.adminpage=10;
this.admincurrentPage=1;

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。