前端将JSON或者table直接导出为excel

一、引入Sheetjs或者npm直接下载

javascript 复制代码
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>

二、页面中使用

javascript 复制代码
//json导出为excel
<button onclick="exportExcel()">导出</button>
  <script>
    const exportExcel = () => {
      const data = [
        { name: 'John', age: 30, city: 'New York' },
        { name: 'Anna', age: 22, city: 'London' }
      ];

      const fields = ['name', 'age', 'city'];
      var workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.json_to_sheet(data, { header: fields });
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      XLSX.writeFile(workbook, 'data.xlsx');
    }
  </script>
//表格table转成excel
//result 是table的id
 const wb = XLSX.utils.table_to_book(document.getElementById('result'))
  XLSX.writeFile(wb, 'location.xlsx')
相关推荐
毛骗导演1 分钟前
OpenClaw Gateway RPC 运行时:一个 WebSocket 协议引擎的深度解剖
前端·架构
码路飞2 分钟前
不会 Rust 也能玩 WebAssembly:3 个 npm install 就能用的 WASM 神器
前端·javascript·webassembly
sudo_jin4 分钟前
从“输入网址”到“帧级控制”:我对事件循环与主线程管理的终极认知
前端·javascript
flyfox4 分钟前
Kiro AI IDE 深度使用指南:从入门到高效开发
前端·人工智能·ai编程
lovingsoft6 分钟前
Cursor Skills 实战教程:解锁AI编码效率,附多场景案例
前端·人工智能
小凡同志9 分钟前
React vs Vue:两种前端架构哲学的深度解析
前端·vue.js
miss11 分钟前
Vue2 老项目上 TS?这 10 个坑我替你踩了,附完整迁移方案
前端
小码哥_常12 分钟前
RecyclerView深坑大揭秘:FlexboxLayoutManager引发的滑动误判
前端
Neptune113 分钟前
让我带你迅速吃透React组件通信:从入门到精通(中篇)
前端·react.js·面试
bluceli14 分钟前
CSS子选择器与伪类:精准控制元素样式的利器
前端·css