前端将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')
相关推荐
开开心心就好36 分钟前
高效Excel合并拆分软件
开发语言·javascript·c#·ocr·排序算法·excel·最小二乘法
難釋懷37 分钟前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax
特立独行的猫a42 分钟前
Nuxt.js 中的路由配置详解
开发语言·前端·javascript·路由·nuxt·nuxtjs
咸虾米44 分钟前
在uniCloud云对象中定义dbJQL的便捷方法
前端·javascript
梨子同志1 小时前
JavaScript Proxy 和 Reflect
前端·javascript
汤圆炒橘子1 小时前
状态策略模式的优势分析
前端
90后的晨仔1 小时前
解析鸿蒙 ArkTS 中的 Union 类型与 TypeAliases类型
前端·harmonyos
IT_陈寒1 小时前
Element Plus 2.10.0 重磅发布!新增Splitter组件
前端·人工智能·后端
挑战者6668881 小时前
vue入门环境搭建及demo运行
前端·javascript·vue.js
贩卖纯净水.1 小时前
Webpack的基本使用 - babel
前端·webpack·node.js