在Vue里如何把网页的数据导出到Excel的方法

在Vue中如何把网页的数据导出到Excel在很多情况下都是必须的，下面给出一种基于js-xlsx的实现方式：

步骤1：安装js-xlsx

在Vue项目中安装js-xlsx，可以使用npm安装：

npm install xlsx --save

或者使用bower安装：

bower install js-xlsx --save

步骤2：编写Vue组件

Vue组件通常包含一些数据，示例如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(person, index) in persons" :key="index">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
          <td>{{ person.gender }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportData">导出为Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data() {
    return {
      persons: [
        {
          name: '张三',
          age: 18,
          gender: '男'
        },
        {
          name: '李四',
          age: 20,
          gender: '女'
        },
        {
          name: '王五',
          age: 22,
          gender: '男'
        }
      ]
    }
  },
  methods: {
    exportData() {
      /* 实现导出数据 */
    }
  }
}
</script>

在组件中可以看到数据表格和一个导出Excel的按钮。其中导出Excel的方法是在methods中定义的exportData()方法。

步骤3：实现导出Excel的方法

在Vue组件中实现导出Excel的方法需要用到js-xlsx库。js-xlsx使用起来比较简单，只需要利用它提供的工具函数即可生成Excel文件。

exportData() {
  // 1. 创建workbook对象
  let wb = XLSX.utils.book_new()

  // 2. 创建工作表
  let ws = XLSX.utils.json_to_sheet(this.persons)

  // 3. 添加工作表到workbook对象
  XLSX.utils.book_append_sheet(wb, ws, '人员名单')

  // 4. 生成文件
  let filename = '人员名单.xlsx'
  XLSX.writeFile(wb, filename)
}

在exportData()方法中，首先使用XLSX.utils.book_new()创建workbook对象，然后使用XLSX.utils.json_to_sheet()将数据转化为工作表，接着使用XLSX.utils.book_append_sheet()将工作表添加到workbook对象中。最后使用XLSX.writeFile()生成Excel文件并下载到本地。

下面是完整的Vue组件代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(person, index) in persons" :key="index">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
          <td>{{ person.gender }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportData">导出为Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data() {
    return {
      persons: [
        {
          name: '张三',
          age: 18,
          gender: '男'
        },
        {
          name: '李四',
          age: 20,
          gender: '女'
        },
        {
          name: '王五',
          age: 22,
          gender: '男'
        }
      ]
    }
  },
  methods: {
    exportData() {
      // 1. 创建workbook对象
      let wb = XLSX.utils.book_new()

      // 2. 创建工作表
      let ws = XLSX.utils.json_to_sheet(this.persons)

      // 3. 添加工作表到workbook对象
      XLSX.utils.book_append_sheet(wb, ws, '人员名单')

      // 4. 生成文件
      let filename = '人员名单.xlsx'
      XLSX.writeFile(wb, filename)
    }
  }
}
</script>

上述代码可以将组件中的person数据导出为一个名为“人员名单.xlsx”的Excel文件。

另外一种示例代码，可以使用XLSX.utils.table_to_book()函数，将一个HTML的table元素转化为workbook对象：

exportData() {
  // 1. 获取table元素
  let table = document.querySelector('table')

  // 2. 创建workbook对象
  let wb = XLSX.utils.table_to_book(table)

  // 3. 生成文件
  let filename = '人员名单.xlsx'
  XLSX.writeFile(wb, filename)
}

在示例代码中，首先获取页面上的table元素，然后使用XLSX.utils.table_to_book()将table元素转化为workbook对象，最后生成Excel文件并下载到本地。注意，使用XLSX.utils.table_to_book()转化table元素时，需要保证table元素中的数据格式符合Excel文件的要求。