如何在Vue2中导出Excel？

最新推荐文章于 2025-03-20 09:36:50 发布

Memento_mori19

最新推荐文章于 2025-03-20 09:36:50 发布

阅读量1k

点赞数 4

文章标签： excel 前端 linux

本文链接：https://blog.csdn.net/Memento_mori1984/article/details/131483787

版权

文章展示了如何在Vue项目中利用xlsx库进行Excel文件的导出。首先通过npm安装xlsx依赖，然后导入并使用utils和writeFileXLSX方法。通过绑定点击事件触发exportToExcel函数，该函数创建工作表，填充数据，修改表头，并调用writeFileXLSX生成Excel文件。示例包括基础和实际应用案例，涉及数据处理和API调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 先在终端安装xlsx依赖

npm i xlsx

2. 从xisx中按需导入utils, writeFileXLSX

<script>
import { utils, writeFileXLSX } from 'xlsx'
</script>

3. 通过绑定点击事件触发methods中的函数

<el-button></el-button>是element-UI组件中的按钮

 <el-button @click="exportToExcel">导出Excel</el-button>

（1）基础案例：

<script>
import { utils, writeFileXLSX } from 'xlsx'

exportToExcel() {
  // 创建一个工作表
  const worksheet = utils.json_to_sheet(
    [
      { name: '张三', age: 18 },
      { name: '李四', age: 28 }
    ]
  )
  // 创建一个新的工作簿
  const workbook = utils.book_new()
  // 把工作表添加到工作簿
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头
  utils.sheet_add_aoa(worksheet, [['姓名', '年龄']], { origin: 'A1' })
  writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
}
</script>

（2）实际应用案例：

<script>
async exportToExcel() {
      const res = await getBuildingListAPI(this.params)
      const tableHeader = ['name', 'floors', 'area', 'propertyFeePrice', 'status']
      // 处理数据保证
      const sheetData = res.data.rows.map((item) => {
        const _item = {}
        tableHeader.forEach(key => {
          _item[key] = item[key]
        })
        return _item
      })
      // 创建一个工作表
      const worksheet = utils.json_to_sheet(sheetData)
      // 创建一个新的工作簿
      const workbook = utils.book_new()
      // 把工作表添加到工作簿
      utils.book_append_sheet(workbook, worksheet, 'Data')
      // 改写表头
      utils.sheet_add_aoa(worksheet, [['楼宇名称', '层数', '在管面积(㎡)', '物业费(㎡)', '状态']], { origin: 'A1' })
      writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
    }
</script>