<!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. 配置apache-maven-3.6.0时所遇到的坑（一）

    在命令行窗口中输入:mvn  -v    或 直接    mvn    时报错:“错误: 找不到或无法加载主类 org.codehaus.plexus.classworlds.launcher.Lau ...

  2. 四则运算V1.1

    作业:https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/997 代码:https://coding.net/u/Dawnfox/p/f4 ...

  3. 启动服务报错：nested exception is java.lang.NoSuchMethodError: org.apache.cxf.common.jaxb.JAXBUtils.closeUnmarshaller(Ljavax/xml/bind/Unmarshaller;)V

    1.启动tomcat时报错:Error creating bean with name 'payInfService': Invocation of init method failed; neste ...

  4. 安装Ubuntu16.04与windows10双系统后，如何修改启动默认设置

    在安装了Ubuntu16.04系统之后,系统会默认自启动Ubuntu16.04,而我们大多数情况下可能都在使用windows系统,不修改默认设置,不经意间便会启动了Ubuntu16.04,通过我的经历 ...

  5. linux下使用小票打印

    linux下使用小票打印 打印机: Xprinter XP-58IIH指令支持: ESC/POS接口: USB, 蓝牙 Linux系统: Centos7 蓝牙配对很快, 配对好后就是连接状态. 但很快 ...

  6. Count the Sheep 思维题

    Altough Skipping the class is happy, the new term still can drive luras anxious which is of course b ...

  7. 构建工具 buildtool

    一.什么是build tool? 构建工具是从源代码自动创建可执行应用程序的程序.构建包括将代码编译,链接和打包成可用或可执行的形式.在小项目中,开发人员通常会手动调用构建过程.这对于较大的项目来说是 ...

  8. python 面向对象（类的成员，属性，绑定和非绑定，）

    面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对象),实 ...

  9. rsync入门使用

    rsync是用来同步文件的,但是是基于增量同步的,也就是说每次同步时不需要把全部文件数据都传输过去,只需要将不相同的部分(也就是说增量差异内容)传输过去. 其基本命令格式为rsync [option] ...

  10. LED硬件访问服务(2)——JNI/HAL

    一.系统编程 1.SystemServer.java类中提供了main()方法,说明它是以一个进程的方式存在的,启动后直接执行其run() 2.注册服务ServiceManager.addServic ...