前端万级数据量表格预览及前端导出Excel方案、组件封装（基于vxetable虚拟滚动和web worker）

npm install babel-plugin-import -D

{

        "plugins": [

          [

            "import",

            {

              "libraryName": "vxe-table",

              "style": true // 样式是否也按需加载

            }

          ]

        ]

      }

import { VXETable, Icon, Column, Table } from 'vxe-table'

Vue.use(Icon).use(Column).use(Table).use(VXETable)

npm install vue-worker -S

import VueWorker from 'vue-worker'

Vue.use(VueWorker)

importScripts('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.3/xlsx.core.min.js')

//importScripts('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.3/xlsx.core.min.js')

importScripts(location.origin + '/workers/xlsx.core.min.js')

//因为woker中是有loaction变量的，所以可以通过服务器的绝对路径进行访问，以获得XLSX。

const ws = XLSX.utils.aoa\_to\_sheet(data)

<result-table :rowList="rowList" :colList="colList"> </result-table>

<template>

  <div style="height: 100%">

    <div style="display: flex; justify-content: flex-end">

      <el-pagination

        background

        layout="sizes,prev, pager, next,total"

        :page-sizes="[10, 50, 100, 500, 1000]"

        :current-page="currentPageNum"

        :page-size="currentPageSize"

        :total="rowListTotal"

        @current-change="currentChange"

        @size-change="handleSizeChange"

      >

      </el-pagination>

      <el-button

        type="primary"

        @click="handleLargeDataExport"

        size="small"

        icon="el-icon-download"

        style="z-index: 99; margin-right: 10px"

        >导出全部</el-button

      >

    </div>

    <div style="height: calc(100% - 80px); padding: 5px 10px">

      <vxe-table

        border

        ref="xTable1"

        height="100%"

        empty-text="暂无数据"

        show-overflow="title"

        style="overflow: visible"

        show-header-overflow

        :row-config="{ isHover: true }"

        :tooltip-config="{ showAll: true }"

      >

        <vxe-column

          v-for="item in colList"

          :field="item.name"

          :resizable="true"

          min-width="120"

          :title="item.name"

          :key="item.name"

        ></vxe-column>

      </vxe-table>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      currentList: [], //当前页数据

      currentPageNum: 1, //当前页码

      currentPageSize: 50, //当前页尺寸

      rowListTotal: 0 //结果总条数

    }

  },

  props: {

    //行数据

    rowList: {

      type: Array,

      default: []

    },

    // 列数据

    colList: {

      type: Array,

      default: []

    }

  },

  created() {},

  watch: {

    rowList: {

      handler(newVal, oldVal) {

        console.log('rowListHandle')

        this.rowListTotal = newVal.length

        this.currentList = newVal.slice(0, this.currentPageSize)

        this.currentPageNum = 1

      },

      immediate: true

    },

    currentList: {

      handler(newVal, oldVal) {

        console.log('currentListHandle')

        this.$refs.xTable1.loadData(newVal)

      }

    }

  },

  methods: {

    //当前页尺寸改变

    handleSizeChange(pageSize) {

      this.currentPageSize = pageSize

      this.currentList = this.rowList.slice(

        (this.currentPageNum - 1) \* this.currentPageSize,

        this.currentPageNum \* this.currentPageSize

      )

    },

    // 当前页码改变

    currentChange(pageNum) {

      this.currentPageNum = pageNum

      this.currentList = this.rowList.slice(

        (this.currentPageNum - 1) \* this.currentPageSize,

        this.currentPageNum \* this.currentPageSize

      )

    },

    // 全部结果导出

    handleLargeDataExport() {

      let handleData = this.rowList

      if (handleData.length == 0) {

        return this.$message('暂无数据！')

      }

      this.$message('正在导出,请稍后...')

      this.$worker

        .run(

          (handleData) => {

            // console.time('handelExcel')

            let data = handleData.map((item, index) => {

              let tempArr = []

              for (let itemKey in item) {

                tempArr.push(item[itemKey])

              }

              return tempArr

            })

            let keyArr = []

            for (let itemKey in handleData[0]) {

              keyArr.push(itemKey)

            }

            data.unshift(keyArr)



            importScripts(location.origin + '/workers/xlsx.core.min.js')

            // importScripts('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.3/xlsx.core.min.js')

            const ws = XLSX.utils.aoa\_to\_sheet(data)

            const wb = XLSX.utils.book\_new()

            XLSX.utils.book\_append\_sheet(wb, ws, 'data')

            const buf = XLSX.write(wb, { type: 'array', bookType: 'xlsx' })

            // console.timeEnd('handelExcel')

            return buf

          },

          [handleData]

        )

        .then((res) => {

          this.$message({

            message: '已生成文件!',

            type: 'success',

            duration: 2000

          })

          const url = window.URL.createObjectURL(new Blob([res]))

          const link = document.createElement('a')

          link.href = url

          link.download = `全部结果\_${new Date().getTime()}.xlsx`

          link.click()

        })

        .catch((err) => {

          console.log(err)

        })

    }

  }

}

</script>