vue导出excel表格实现分页功能

要实现Vue导出Excel表格并且带分页功能，可以使用js-xlsx和file-saver这两个库来实现。以下是具体的实现步骤：

1. 安装js-xlsx和file-saver库

可以使用npm或者yarn来安装这两个库：

npm install xlsx file-saver --save

2. 创建一个Excel导出按钮

在Vue组件中，可以创建一个按钮来触发Excel导出事件：

<template>
  <div>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

<script>
  import XLSX from 'xlsx'
  import FileSaver from 'file-saver'

  export default {
    data () {
      return {
        // 分页相关数据
        currentPage: 1,
        pageSize: 10,
        total: 100,
        tableData: [
          // 表格数据
        ]
      }
    },
    methods: {
      exportExcel () {
        // 导出Excel逻辑
      }
    }
  }
</script>

3. 编写导出Excel逻辑

在exportExcel方法中，可以使用js-xlsx和file-saver库来生成Excel文件并下载到本地：

exportExcel () {
  const wb = XLSX.utils.book_new()

  // 构造表格数据
  const sheetData = this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
  // 构造表格头
  const headers = ['列1', '列2', '列3']
  const data = [headers, ...sheetData.map(row => [row.col1, row.col2, row.col3])]
  const ws = XLSX.utils.aoa_to_sheet(data)
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

  // 生成Excel文件并下载
  const excelFileName = `表格数据_${this.currentPage}.xlsx`
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  FileSaver.saveAs(blob, excelFileName)
}

注意上面的s2ab函数，这是一个将字符串转为ArrayBuffer的函数，可以在导出Excel代码之前定义：

function s2ab (s) {
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF
  }
  return buf
}

4. 实现分页功能

最后，还需要实现分页功能。可以使用element-ui的分页组件来实现：

<template>
  <div>
    <button @click="exportExcel">导出Excel</button>

    <el-pagination
      v-model="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
  import XLSX from 'xlsx'
  import FileSaver from 'file-saver'

  export default {
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 100,
        tableData: [
          // 表格数据
        ]
      }
    },
    methods: {
      exportExcel () {
        const wb = XLSX.utils.book_new()

        const sheetData = this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        const headers = ['列1', '列2', '列3']
        const data = [headers, ...sheetData.map(row => [row.col1, row.col2, row.col3])]
        const ws = XLSX.utils.aoa_to_sheet(data)
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

        const excelFileName = `表格数据_${this.currentPage}.xlsx`
        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })
        const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
        FileSaver.saveAs(blob, excelFileName)
      },
      handlePageChange (value) {
        this.currentPage = value
      }
    }
  }
</script>

在handlePageChange方法中，可以更新当前页码，并重新计算需要导出的表格数据。这样就可以实现分页导出Excel表格了。