前端将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')
相关推荐
Coder_Boy_11 小时前
基于SpringAI的在线考试系统-教学管理与用户管理模块联合回归测试文档
java·前端·数据库·人工智能·spring boot
希赛网11 小时前
网工面试:常问技术问题汇总(3)
服务器·前端·网络·网络工程师·ospf·网工面试·技术面
WYiQIU11 小时前
普及一下字节前端岗需要达到的强度......
前端·javascript·vue.js·面试·职场和发展
切糕师学AI11 小时前
Win11 如何彻底阻止 Edge 后台运行
前端·edge
小阿鑫11 小时前
32岁程序员猝死背后,我的一些真实感受
前端·后端·程序员·代码人生
qq_124987075311 小时前
基于Spring Boot的桶装水配送管理系统的设计与实现(源码+论文+部署+安装)
java·前端·spring boot·后端·spring·毕业设计·计算机毕业设计
帆张芳显11 小时前
智表zcell产品V3.5 版发布,新增行列选中操作等功能
前端·javascript·excel·插件·canva可画
程序员小寒11 小时前
前端性能优化之首屏时间采集篇
前端·性能优化
GGGG寄了11 小时前
HTML——div和span标签和字符实体
前端·html
这儿有一堆花12 小时前
网页开发的基石:深入解析 HTML 与 PHP 的本质差异
前端·html·php