前端将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')
相关推荐
x-cmd2 分钟前
[x-cmd] 专为 AI Agent 设计的无头浏览器,比 Chrome 速度快 9 倍且少用 16 倍内存 | Lightpanda
前端·chrome·ai·自动化·agent·浏览器·x-cmd
chxii14 分钟前
Nginx 正则 location 指令匹配客户端请求的 URI
前端·nginx
qing2222222215 分钟前
Linux:/var/log/journal 路径下文件不断增加导致根目录磁盘爆满
linux·运维·前端
Armouy21 分钟前
Nuxt.js 学习复盘:核心概念与实战要点
前端·javascript·学习
ZhaoJuFei31 分钟前
React生态学习路线
前端·学习·react.js
apcipot_rain1 小时前
CSS知识概述
前端·css
837927397@QQ.COM1 小时前
个人理解无界原理
开发语言·前端·javascript
冰暮流星1 小时前
javascript之Dom查询操作1
java·前端·javascript
admin and root1 小时前
XSS之Flash弹窗钓鱼
前端·网络·安全·web安全·渗透测试·xss·src
qq_381338502 小时前
[特殊字符] MonkeyCode AI 核心功能详解
前端