网页端信息导出Excel表格

简单几行TS代码，实现网页端信息导出成Excel表格。

 实现效果：

导出的Excel文件：

首先安装对应依赖：

pnpm i xlsx

代码实现：

在网页文件里写入如下代码：

<script lang="ts" setup>

import { utils, writeFileXLSX} from 'xlsx'


// 1. 导出Excel
const exportExcel = ()=>{
  // 1.1 创建一个工作簿
  const workbook = utils.book_new()
  // 1.2 创建一个工作表
  const worksheet = utils.json_to_sheet([
    { name: '张三', age: 18, hobby: '敲代码' },
    { name: '潘子', age: 66, hobby: '劝劝嘎子回来卖酒' },
    { name: '嘎子', age: 30, hobby: '偷狗' },
  ])
  // 1.3 把工作表添加到工作簿, 并给工作表改名字
  utils.book_append_sheet(workbook, worksheet, '员工信息')
  // 1.4 改写表头
  utils.sheet_add_aoa(worksheet, [['姓名', '年龄', '爱好']], {origin: 'A1'})
  // 1.5 导出工作簿
  writeFileXLSX(workbook, '员工信息表.xlsx')
}

</script>

<template> 
    <button @click="exportExcel">导出Excel</button>
</template>

这只是个例子，具体信息可以根据后端返回来的信息例如数组，去做特殊处理来生成对应文件。