前端将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')
相关推荐
计算机魔术师5 分钟前
OpenAI 回应智能体接管德语维基网站事件,称将改革 AI 误对齐事件披露机制
前端
晴天1617 分钟前
PWA 让网页拥有原生应用的体验
前端·pwa
雪芽蓝域zzs17 分钟前
第十七节:面包屑导航组件(适配多级嵌套路由)
前端·javascript·vue.js
2601_9603563822 分钟前
库存分析岗位秋招准备:SQL、Excel、WMS与供应链指标
数据库·sql·excel
Csvn43 分钟前
类型驱动开发(Type-Driven Development):让类型约束先行为导向
前端
计算机魔术师44 分钟前
AI 代理把德国维基当留言板,OpenAI 闷声几周才承认
前端
yume_sibai1 小时前
Element Plus 其他实用组件完全指南(10个核心组件)
前端·javascript·vue.js
统计学小王子1 小时前
数学建模国赛倒计时5天——《软件工具(Excel)——快捷键总结》
数学建模·excel
2601_963906781 小时前
网页版 Excel 合并工具
excel·软件需求
雪芽蓝域zzs1 小时前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js