vue3+ xlsx冻结单元格

在Vue3中使用xlsx-style来冻结单元格，你可以按照以下步骤进行操作：

1. 首先，安装xlsx-style和file-saver依赖：

npm install xlsx-style file-saver

2. 在Vue组件中引入xlsx-style和file-saver：

import XLSX from 'xlsx-style'
import FileSaver from 'file-saver'

3. 创建一个冻结单元格的函数，并在需要冻结的地方调用该函数：

export default {
  methods: {
    freezeCell() {
      // 创建一个工作簿
      let wb = XLSX.utils.book_new()
      // 创建一个工作表
      let ws = XLSX.utils.aoa_to_sheet([
        ['Header 1', 'Header 2', 'Header 3'],
        ['Data 1', 'Data 2', 'Data 3'],
        ['Data 4', 'Data 5', 'Data 6']
      ])
      // 冻结第一行和第一列
      ws['!freeze'] = 'A2'
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      // 将工作簿转换为二进制数据
      let wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })
      // 创建一个Blob对象并保存文件
      FileSaver.saveAs(new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), 'example.xlsx')
    },
    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
    }
  }
}

4. 在Vue模板中添加一个按钮，并调用冻结单元格的函数：

<template>
  <div>
    <button @click="freezeCell">冻结单元格</button>
  </div>
</template>

这样，当你点击"冻结单元格"按钮时，会生成一个带有冻结单元格的Excel文件，并自动下载到本地。