vue中使用js-xlsx导出excel的实现方法

当需要在Vue中生成Excel文件时，可以使用js-xlsx库来实现。下面是具体步骤：

步骤一：安装依赖

在终端中输入以下命令安装js-xlsx依赖：

npm install xlsx

步骤二：导入依赖

在需要使用js-xlsx的组件上方，引入js-xlsx：

import xlsx from 'xlsx'

步骤三：生成excel数据

在需要生成excel的方法内，将数据填充至一个二维数组内，例如：

let data = [
  ["姓名", "年龄", "性别"],
  ["小明", 18, "男"],
  ["小红", 17, "女"],
  ["小李", 20, "男"]
];

步骤四：生成Workbook对象

使用js-xlsx的utils.book_new()方法生成Workbook对象：

let workbook = xlsx.utils.book_new();

步骤五：生成Worksheet对象

使用js-xlsx的utils.json_to_sheet()方法将数据转为Worksheet对象：

let worksheet = xlsx.utils.json_to_sheet(data);

步骤六：将Worksheet对象添加至Workbook对象内

使用js-xlsx的utils.book_append_sheet()方法将Worksheet对象添加至Workbook对象内：

xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");

步骤七：使用writeFile方法将文件保存到本地

使用xlsx.writeFile()方法将数据保存到本地文件：

xlsx.writeFile(workbook, "student.xlsx");

至此，完成了使用js-xlsx在Vue中导出Excel的过程。

示例一

下面是一个简单的示例，将表格的数据导出为浏览器端的Excel：

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

<script>
import xlsx from 'xlsx'

export default {
  name: 'ExportExcel',
  data () {
    return {
      list: [
        {name: '小明', age: 18, sex: '男'},
        {name: '小红', age: 17, sex: '女'},
        {name: '小李', age: 20, sex: '男'}
      ]
    }
  },
  methods: {
    exportExcel () {
      let data = [['姓名', '年龄', '性别']]
      for (let i = 0; i < this.list.length; i++) {
        let item = this.list[i]
        let arr = [item.name, item.age, item.sex]
        data.push(arr)
      }
      let workbook = xlsx.utils.book_new()
      let worksheet = xlsx.utils.aoa_to_sheet(data)
      xlsx.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      xlsx.writeFile(workbook, 'student.xlsx')
    }
  }
}
</script>

示例二

下面是另一个示例，将表格的数据导出为本地文件：

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

<script>
import xlsx from 'xlsx'

export default {
  name: 'ExportExcel',
  data () {
    return {
      list: [
        {name: '小明', age: 18, sex: '男'},
        {name: '小红', age: 17, sex: '女'},
        {name: '小李', age: 20, sex: '男'}
      ]
    }
  },
  methods: {
    exportExcel () {
      let data = [['姓名', '年龄', '性别']]
      for (let i = 0; i < this.list.length; i++) {
        let item = this.list[i]
        let arr = [item.name, item.age, item.sex]
        data.push(arr)
      }
      let workbook = xlsx.utils.book_new()
      let worksheet = xlsx.utils.aoa_to_sheet(data)
      xlsx.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      let wbout = xlsx.write(workbook, {bookType: 'xlsx', type: 'binary'})
      function s2ab (s) { // 将字符串转为ArrayBuffer
        let buf = new ArrayBuffer(s.length)
        let view = new Uint8Array(buf)
        for (let i = 0; i < s.length; i++) {
          view[i] = s.charCodeAt(i) & 0xFF
        }
        return buf
      }
      let blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'})
      let filename = 'student.xlsx'
      if (navigator.msSaveBlob) {
        navigator.msSaveBlob(blob, filename)
      } else {
        let link = document.createElement('a')
        if (link.download !== undefined) {
          let url = URL.createObjectURL(blob)
          link.setAttribute('href', url)
          link.setAttribute('download', filename)
          link.style.visibility = 'hidden'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      }
    }
  }
}
</script>

这个示例中，在文件下载部分，使用了Blob和URL.createObjectURL()来下载文件。对于不支持createObjectURL()的浏览器，使用了navigator.msSaveBlob()方法来实现文件下载。