前端将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')
相关推荐
皮卡龙44 分钟前
Java常用的JSON
java·开发语言·spring boot·json
PineappleCoder1 小时前
还在重复下载资源?HTTP 缓存让二次访问 “零请求”,用户体验翻倍
前端·性能优化
拉不动的猪1 小时前
webpack编译中为什么不建议load替换ast中节点删除consolg.log
前端·javascript·webpack
李姆斯1 小时前
Agent时代下,ToB前端的UI和交互会往哪走?
前端·agent·交互设计
源码获取_wx:Fegn08952 小时前
基于springboot + vue健身房管理系统
java·开发语言·前端·vue.js·spring boot·后端·spring
闲谈共视2 小时前
基于去中心化社交与AI智能服务的Web钱包商业开发的可行性
前端·人工智能·去中心化·区块链
CreasyChan2 小时前
C# 反射详解
开发语言·前端·windows·unity·c#·游戏开发
JIngJaneIL3 小时前
基于Java+ vue智慧医药系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
hashiqimiya4 小时前
两个步骤,打包war,tomcat使用war包
java·服务器·前端
零度@4 小时前
Java中Map的多种用法
java·前端·python