<!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. 创建small表空间size32G报错ORA-01144

    #报错现象 #创建Oracle数据库11g默认标准块大小8K,直接分配32g报错 create tablespace ceshi datafile '+data' size 32g * ERROR a ...

  2. Linux不在显示器上方总是显示企鹅

    /********************************************************************************* * Linux不在显示器上方总是显 ...

  3. 【机器学习基础】SVM实现分类识别及参数调优(二)

    前言 实现分类可以使用SVM方法,但是需要人工调参,具体过程请参考here,这个比较麻烦,小鹅不喜欢麻烦,正好看到SVM可以自动调优,甚好! 注意 1.reshape的使用: https://docs ...

  4. WCF 添加服务引用 HTTP 请求已超过为 00:00:00 分配的超时。为此操作分配的时间可能是较长超时

    今天在用公司的笔记本引用WCF的时候,处于一直等待的过程,一直在下载信息,一直等了很长时间,弹出了一个消息 下载“http://ip:8085/xxxxx/xxxxx/mex/$metadata”时出 ...

  5. P2467 [SDOI2010]地精部落 （dp+组合数）【扩展Lucas好难不会】

    题目链接:传送门 题目: 题目描述 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为N的山脉H可分为从左到右的N段,每段有一个独一无二的高度Hi,其 ...

  6. mask-code-python

    tf.sqeeze: 给定张量输入,此操作返回相同类型的张量,并删除所有尺寸为1的尺寸. 如果不想删除所有尺寸1尺寸,可以通过指定squeeze_dims来删除特定尺寸1尺寸.如果不想删除所有大小是1 ...

  7. python scrapy 爬虫实例

    1 创建一个项目 scrapy startproject basicbudejie 2 编写爬虫 import scrapy class Basicbudejie(scrapy.Spider): na ...

  8. 二分法检索（binary search）（又名二进制搜索）

    定义: 二分法检索的基本思想是设字典中的元素从小到大有序地存放在数组(array)中.首先将给定值key与字典中间位置上元素的关键码(key)比较,如果相等,则检索成功:否则,若key小,则在字典前半 ...

  9. eclipse 启动tomcat 出现错误Could not publish server configuration: null. java.lang.NullPointerException

    若出现以上错误,则很有可能是修改了conf/server.xml的内容,将改过的地方改回去,然后重启tomcat 就可以啦

  10. &，~，|，^

    与.或.异或的运算   与运算 (“  & ”) 参与运算的两个数据,按照二进制位进行“与运算”.运算规则:0&0=0;   0&1=0;   1&0=0;    1& ...