前端将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')
相关推荐
似水流年_zyh9 分钟前
canvas涂抹,擦除功能组件
前端
胖虎26511 分钟前
前端多文件上传核心功能实现:格式支持、批量上传与状态可视化
前端
胖虎26513 分钟前
Vue2 项目常用配置合集:多语言、SVG 图标、代码格式化、权限指令 + 主题切换
前端
一键定乾坤17 分钟前
npm 源修改
前端
parade岁月18 分钟前
Vue 3 响应式陷阱:对象引用丢失导致的数据更新失效
前端
掘金安东尼20 分钟前
GPT-6 会带来科学革命?奥特曼最新设想:AI CEO、便宜医疗与全新计算机
前端·vue.js·github
申阳24 分钟前
Day 5:03. 基于Nuxt开发博客项目-页面结构组织
前端·后端·程序员
全马必破三32 分钟前
React的设计理念与核心特性
前端·react.js·前端框架
ttod_qzstudio38 分钟前
替代 TDesign Dialog:用 div 实现可拖拽、遮罩屏蔽的对话框
前端·tdesign
用户2986985301440 分钟前
C#: 高效移动与删除Excel工作表
后端·.net·excel