<!DOCTYPE html>

<html lang="en">

  <head></head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>

  </head>

  <body>

    <script>

      // 数据

      let data = { '基本信息': [{name: '李四', sex: 'nan', age: 12}], '成绩': [{class: '计算机', teacher: 'Mrs wang', score: 90}] };

      let columnHeaders = { '基本信息': ['name', 'sex', 'age'], '成绩': ['class', 'teacher', 'score']}

      outputXlsxFile(

        data,

        [{ wch: 50 }, { wch: 50 }, { wch: 10 }],

        "test-xlsx"

      );

      function outputXlsxFile(data, wscols, xlsxName) {

        let sheetNames = [];

        let sheetsList = {};

        const wb = XLSX.utils.book_new();

        for (let key in data) {

          sheetNames.push(key);

          let columnHeader = columnHeaders[key] // 此处是每个sheet的表头

          let temp = transferData(data[key], columnHeader);

          sheetsList[key] = XLSX.utils.aoa_to_sheet(temp);

          sheetsList[key]["!cols"] = wscols;

        }

        wb["SheetNames"] = sheetNames;

        wb["Sheets"] = sheetsList;

        XLSX.writeFile(wb, xlsxName + ".xlsx");

      }

      function transferData(data, columnHeader) {

        let content = [];

        content.push(columnHeader);

        data.forEach((item, index) => {

          let arr = [];

          columnHeader.map(column =>{

            arr.push(item[column]);

          })

          content.push(arr);

        });

        return content;

      }

    </script>

  </body>

</html>
 
注意 上面的引入必须是xlsx.full.min.js

<script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>
 

vue 导出excel 多个sheet的更多相关文章

  1. CRM 报表导出excel时指定sheet名

    如图所示,设置PageName即可: 这样导出excel时,sheet的名就有了:

  2. 项目笔记：导出Excel功能分sheet页插入数据

    导出Excel功能分sheet页处理数据: /*导出EXCEL*/ public void createExcel() { log.info("导出Excel功能已经启动-BEGIN&quo ...

  3. C# 导出Excel 多个Sheet

    以下代码中最关键的代码是 Worksheet mSheet = (Microsoft.Office.Interop.Excel.Worksheet)mBook.Worksheets.Add(miss, ...

  4. vue 导出excel表格

    对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...

  5. vue导出Excel文件

    1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...

  6. 【vue开发】vue导出Excel表格教程&demo

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...

  7. 个人推荐的两款vue导出EXCEL插件

    个人认为前端VUE项目中导出EXCEL比较好的两种方法,均不是我个人原创,我只是收录简单说明,原创地址在下面. 下面推荐两种方法,个人推荐第一种,第二种不做详细讲解,因为作者已经写过博客了,你们可以点 ...

  8. vue 导出excel后端返回乱码下载不了的解析问题

    有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码  this.download('后端给的导出excel的方法', {        ...this.queryParams  }, ` ...

  9. vue 导出excel

    1.安装三个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader 2.在项目中创建一个文件夹(比 ...

随机推荐

  1. 九度OJ-1042-最长公共子序列（LCS）

    题目1042:Coincidence 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4045 解决:2208 题目描述: Find a longest common subsequence ...

  2. Unity调用Windows弹框、提示框(确认与否，中文)

    Unity调用Windows弹提示框 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  3. HDU - 1174：爆头 （三维平面点到射线的距离）

    pro:给定警察的射击位置,设计方向,敌人的位置,敌人的头部半径,问子弹是否可以射到头部. sol:即问头部中点到子弹射线的距离是否小于等于头部半径. 和二维的点到直线一样的操作. det/dot: ...

  4. camp待补

    待修莫对 序列自动机 几何积分 沈阳 M 待删除背包  : 分组背包 K-LIS, K次二分(插到最后stop) 问题转化为LIS bzoj2131 hdu4055 最小线段覆盖环 实时路况 分治+f ...

  5. IDEA 热部署- 自动编译设置

    原文:https://www.cnblogs.com/TechSnail/p/7690829.html    &&   https://blog.csdn.net/qq_3129357 ...

  6. Java中类的构造方法

    constructor:构造函数. 在创建对象的时候,对象成员可以由构造函数方法进行初始化. new对象时,都是用构造方法进行实例化的: 例如:Test test = new Test("a ...

  7. React中的Context——从父组件传递数据

    简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...

  8. Vue的路由动态重定向和导航守卫

    一.重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...

  9. c# 多线程 读写分离

    class Program { private static ReaderWriterLockSlim _LockSlim = new ReaderWriterLockSlim(); private ...

  10. golang json html escape unicode

    https://play.golang.org/p/FAH-XS-QMC https://github.com/gin-gonic/gin/issues/693 package main import ...