Vue与Excel的智能组合：如何实现数据的自动修改和导出

<template>
  <div>
    <input v-model="name" type="text">
    <p>你好, {{ name }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: ''
    }
  }
}
</script>

# 安装exceljs
npm install exceljs

// 导入Excel文件
import ExcelJS from 'exceljs'

export default {
  methods: {
    importExcel(file) {
      const workbook = new ExcelJS.Workbook()
      const reader = new FileReader()

      reader.onload = (e) => {
        const arrayBuffer = e.target.result

        workbook.xlsx.load(arrayBuffer).then((workbook) => {
          const worksheet = workbook.getWorksheet('Sheet1')
          const data = []

          worksheet.eachRow((row, rowNumber) => {
            if (rowNumber !== 1) {
              data.push(row.values)
            }
          })

          // 处理导入的数据
          console.log(data)
        })
      }

      reader.readAsArrayBuffer(file)
    },
    exportExcel() {
      const workbook = new ExcelJS.Workbook()
      const worksheet = workbook.addWorksheet('Sheet1')

      // 假设我们有一个数据数组
      const data = [
        ['Name', 'Age'],
        ['Alice', 25],
        ['Bob', 30],
        ['Charlie', 35]
      ]

      // 将数据写入Excel中
      data.forEach((row) => {
        worksheet.addRow(row)
      })

      // 导出Excel文件
      workbook.xlsx.writeBuffer().then((buffer) => {
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')

        link.href = url
        link.setAttribute('download', 'output.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }
  }
}