Vue 获取 Excel 模板，修改数据和样式，并导出：完整指南

本文将引导你使用 Vue 获取 Excel 模板，修改模板数据和样式，包括添加边框和合并单元格，并最终导出修改后的 Excel 文件。

1. 获取 Excel 模板

你可以使用 axios 或 fetch 等库向服务器发送 GET 请求获取 Excel 模板文件。以下示例使用 axios：

axios.get('/api/excel-template')
  .then(response => {
    // 获取模板成功，response.data 为 Excel 文件流
  })
  .catch(error => {
    // 获取模板失败，处理错误
  })

2. 修改模板数据

使用第三方库如 xlsx 等，将 Excel 文件解析为数据格式，然后进行数据修改。以下示例使用 xlsx：

import XLSX from 'xlsx'

// 读取 Excel 文件流
const workbook = XLSX.read(data, { type: 'array' })

// 获取第一个 sheet
const worksheet = workbook.Sheets[workbook.SheetNames[0]]

// 修改数据
worksheet.A1.v = 'hello world'

3. 修改模板样式

使用 xlsx 等第三方库可以直接操作单元格的样式，例如添加边框、合并单元格等。以下示例：

// 添加边框
worksheet['!cols'] = [{ wpx: 100 }, { wpx: 100 }] // 设置列宽
worksheet['A1'].s = { border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } }

// 合并单元格
worksheet['!merges'] = [{ s: { r: 1, c: 1 }, e: { r: 3, c: 3 } }]

4. 导出 Excel 文件

使用 xlsx 等第三方库将数据格式转换为 Excel 文件流，然后使用浏览器提供的下载功能进行下载。以下示例：

// 将数据格式转换为 Excel 文件流
const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })

// 将文件流转换为 Blob 对象
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })

// 创建下载链接并下载文件
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = 'example.xlsx'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)

总结

通过以上步骤，你可以轻松地在 Vue 中获取 Excel 模板，修改模板数据和样式，并最终导出修改后的 Excel 文件。