一、之前写了一种vue+el-table一键导出到excel,想看的可以翻翻我之前发布的，但是那种方法有一点就是，几百条数据进行渲染还可以，但是上W条数据就会造成页面卡顿，为了解决卡顿，于是又找到了下面这种方法，亲测有效：
二、安装依赖
npm i webopenfather-excel -S
三、话不多说，上代码
A.template部分
<template><div><el-button type="success" icon="el-icon-download" @click="StartExport">导出</el-button></div></template>
B.script部分
<script>import { download } from 'webopenfather-excel' //导入方法export default {data(){return {tableData: [{//假设这就是上万条数据的数组date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods:{StartExport(){let temp = this.tableData.map((item)=>{return {data:item.date,name:item.name,address:item.address};});download("美团订单数据", //Sheet名称['日期','姓名','地址'], //表头temp //要导出的数据)}}}</script>
四、效果展示
好了，以上就是前端导出大量数据的处理方法之一，如果需要用element-ui组件库的el-table导出数据，请看VUE+Elment-ui怎么实现将table表格数据导出到Excel文件？_Single-Thread的博客-CSDN博客，希望对你有帮助，不喜勿喷！
