The solution to the front-end exporting a large amount of data to Excel without lagging?

1. I wrote a vue+el-table one-click export to excel before. If you want to see it, you can read what I posted before, but one thing about that method is that it’s okay to render hundreds of pieces of data, but it’s up to W pieces The data will cause the page to freeze. In order to solve the freeze, the following method was found, and the personal test is effective:

2. Installation dependencies

npm i webopenfather-excel -S

3. Without further ado, let’s go to the code

A. template part

<template>
  <div>
    <el-button type="success" icon="el-icon-download" @click="StartExport">
      导出
    </el-button>
  </div>
</template>

B. script part

<script>
import { download } from 'webopenfather-excel'   //导入方法
export default {
  data(){
    return {
      tableData: [{     //假设这就是上万条数据的数组
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-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>

4. Effect display

Well, the above is one of the processing methods for exporting a large amount of data from the front end. If you need to use the el-table of the element-ui component library to export data, please see how VUE+Elment-ui can export table table data to an Excel file? _Single-Thread's blog-CSDN blog , I hope it will be helpful to you, don't spray if you don't like it!