Vue 导入本地 Excel 模板数据并修改，添加接口返回数据并导出

本文介绍了使用 Vue.js 导入本地 Excel 模板数据，进行修改，添加接口返回数据，并最终导出为 Excel 文件的完整流程。以下是实现该功能的步骤：

1. 安装依赖

需要安装以下两个依赖：

• xlsx: 用于读取和写入 Excel 文件
• file-saver: 用于将文件保存到本地

npm install xlsx file-saver --save

2. 导入 Excel 模板

使用 axios 发送请求获取 Excel 模板，并使用 xlsx 库读取模板数据：

import axios from 'axios'
import XLSX from 'xlsx'
axios.get('/template.xlsx', { responseType: 'arraybuffer' })
.then(response => {
const data = new Uint8Array(response.data)
const workbook = XLSX.read(data, { type: 'array' })
const worksheet = workbook.Sheets[workbook.SheetNames[0]]
const templateData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
// 处理 Excel 模板数据
})

3. 处理 Excel 模板数据

对于读取到的 Excel 模板数据，可以使用 v-for 渲染表格，也可以将其转换为 JSON 格式，然后在 Vue 组件中进行修改。

// 将 Excel 模板数据转换为 JSON 格式
const keys = templateData[0]
const templateJson = templateData.slice(1).map(row => {
  const obj = {}
  keys.forEach((key, index) => {
    obj[key] = row[index]
  })
  return obj
})
// 将处理后的数据设置为 Vue 组件的 data
data() {
  return {
    tableData: templateJson
  }
}

4. 添加新数据

当需要添加新的数据时，可以通过接口获取数据，并使用 xlsx 库将其添加到 Excel 表格最后。

import XLSX from 'xlsx'
axios.get('/data')
.then(response => {
const newData = response.data
const worksheet = XLSX.utils.json_to_sheet(newData)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet)
const buffer = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' })
const blob = new Blob([buffer], { type: 'application/octet-stream' })
const filename = 'output.xlsx'
saveAs(blob, filename)
})

5. 导出 Excel 文件

最后，使用 file-saver 库将 Excel 文件保存到本地。

import { saveAs } from 'file-saver'
// 将 Excel 文件保存到本地
const buffer = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' })
const blob = new Blob([buffer], { type: 'application/octet-stream' })
const filename = 'output.xlsx'
saveAs(blob, filename)

完整代码示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for='(value, key) in tableData[0]' :key='key'>{{ key }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='(row, index) in tableData' :key='index'>
          <td v-for='(value, key) in row' :key='key'>{{ value }}</td>
        </tr>
      </tbody>
    </table>
    <button @click='exportData'>导出</button>
  </div>
</template>
<script>
import axios from 'axios'
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'
export default {
data() {
return {
tableData: []
}
},
mounted() {
axios.get('/template.xlsx', { responseType: 'arraybuffer' })
.then(response => {
const data = new Uint8Array(response.data)
const workbook = XLSX.read(data, { type: 'array' })
const worksheet = workbook.Sheets[workbook.SheetNames[0]]
const templateData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
const keys = templateData[0]
const templateJson = templateData.slice(1).map(row => {
const obj = {}
keys.forEach((key, index) => {
obj[key] = row[index]
})
return obj
})
this.tableData = templateJson
})
},
methods: {
exportData() {
axios.get('/data')
.then(response => {
const newData = response.data
const worksheet = XLSX.utils.json_to_sheet(newData)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet)
const buffer = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' })
const blob = new Blob([buffer], { type: 'application/octet-stream' })
const filename = 'output.xlsx'
saveAs(blob, filename)
})
}
}
}
</script>

以上代码展示了如何使用 Vue.js 实现导入 Excel 模板数据，进行修改，添加接口返回数据，并导出为 Excel 文件的功能。您可以根据自己的需求进行调整和扩展。