フロントエンドが遅延なく大量のデータを Excel にエクスポートするための解決策はありますか?

1. 以前に vue+el-table のワンクリックで Excel にエクスポートする方法を書きました。見たい場合は、以前に投稿したものを読んでください。ただし、この方法について 1 つ言えるのは、何百ものデータをレンダリングしても問題ないということです。 , ただしW個までです データによりページがフリーズしてしまいます フリーズを解決するには以下の方法が見つかり、個人テストが有効でした。

2. インストールの依存関係

npm i webopenfather-excel -S

3. 早速、コードに進みましょう

A. テンプレート部分

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

B. スクリプト部分

<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.エフェクト表示

上記はフロントエンドから大量のデータをエクスポートするための処理方法の 1 つですが、Element-ui コンポーネント ライブラリの el-table を使用してデータをエクスポートする必要がある場合は、VUE+Elment-ui の方法を参照してください。テーブルのデータを Excel ファイルにエクスポートできますか? _Single-Thread のブログ - CSDN ブログ、お役に立てば幸いです。気に入らない場合はスプレーしないでください。