vue中使用xlsx插件导出多sheet excel实现方法

安装xlsx,一定要注意版本: 

npm i xlsx@0.17.0 -S

package.json:

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "element-ui": "^2.15.12",
    "file-saver": "^2.0.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "xlsx": "^0.17.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-component": "^1.1.1",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.11"
  }
}

App.vue:

<template>
  <div id="app">
    <el-button type="primary" @click="exportExcel">vue xlsx导出多sheet excel</el-button>
  </div>
</template>

<script>
  import XLSX from "xlsx";
  export default {
    methods: {
      exportExcel() {
        var data1 = [
          ["id", "name", "hot"],
          [1, "C++", 99],
          [2, "JavaScript", 98]
        ];
        var data2 = [
          ["id", "语言", "热度"],
          [1, "C++", 99],
          [2, "JavaScript", 98]
        ];
        const ws1 = XLSX.utils.aoa_to_sheet(data1);
        const ws2 = XLSX.utils.aoa_to_sheet(data2);

        /* generate workbook and add the worksheet */
        const wb = XLSX.utils.book_new();
        // XLSX.utils.book_append_sheet(wb, ws, "test");
        XLSX.utils.book_append_sheet(wb, ws1, "月度统计报表");
        XLSX.utils.book_append_sheet(wb, ws2, "隔离库");

        /* save to file */
        XLSX.writeFile(wb, "test.xlsx");
      }
    }
  };
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/106048.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

百度Comate SaaS版本正式发布,助力开发者加速研发过程

百度Comate是基于文心大模型的智能代码助手&#xff0c;让开发者的编码更快、更好、更简单&#xff0c;为开发者自动生成完整的、且更符合实际研发场景的代码行或整个代码块&#xff0c;帮助每一位开发者轻松完成研发任务。10月17日召开的百度世界大会上&#xff0c;百度CTO王海…

「AI知多少」第二期推荐《AIGC:智能创作时代》

一、书名 《AIGC&#xff1a;智能创作时代》 二、简介 在人工智能发展的漫长历程中&#xff0c;如何让机器学会创作一直被视为难以逾越的天堑&#xff0c;“创造力”也因此被视为人类与机器最本质的区别之一。然而&#xff0c;人类的创造力也终将赋予机器创造力&#xff0c;…

Ansible简介

环境 控制节点&#xff1a;Ubuntu 22.04Ansible 2.10.8管理节点&#xff1a;CentOS 8 组成 Ansible环境主要由三部分组成&#xff1a; 控制节点&#xff08;Control node&#xff09;&#xff1a;安装Ansible的节点&#xff0c;在此节点上运行Ansible命令管理节点&#xff…

Node学习笔记之使用Express框架开发接口

我们利用nodeexpressmysql开发接口&#xff0c;对数据库数据进行简单增、删、查改等操作。 接口是什么&#xff1f; 接口是 前后端通信的桥梁 简单理解&#xff1a;一个接口就是 服务中的一个路由规则 &#xff0c;根据请求响应结果 接口的英文单词是 API (Application Progra…

[FSCTF 2023] web题解

文章目录 源码&#xff01;启动!webshell是啥捏细狗2.0ez_php1Hello,youEZ_eval 源码&#xff01;启动! 打开题目&#xff0c;发现右键被禁了 直接ctrlu查看源码得到flag webshell是啥捏 源码 <?php highlight_file(__FILE__); $&#x1f600;"a"; $&#x…

CE-LVD证书跟CE-EMC证书有什么区别?

CE-LVD证书跟CE-EMC证书有什么区别&#xff1f; CE-LVD证书跟CE-EMC证书有什么区别&#xff1f; 近日&#xff0c;TEMU平台电器需提交CE-LVD证书&#xff0c;不再接受EMC证书---玩具产品需提交满足玩具法规的CE证书&#xff0c;法规总是多变的&#xff0c;卖家也是很苦恼&…

html web前端,登录,post请求提交 json带参

html web前端&#xff0c;登录&#xff0c;post请求提交 json带参 3ca9855b3fd279fa17d46f01dc652030.jpg <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title></t…

Redis 主从复制和哨兵监控,实现Redis高可用配置

文章目录 一、概述二、主从复制模拟说明三、准备配置文件四、启动Redis实例五、主从复制配置5.1 命令方式启用和取消主从复制5.2 配置文件方式启用和取消主从复制5.3 测试主从复制5.4 有其主从复制的其他参数配置 六、Sentinel 配置6.1 Sentinel 的作用6.2 Sentinel 监控说明6.…

mysql-linux归档版安装

什么是归档版安装&#xff1f;简单来说就是编译好的软件压缩打包版。 说明&#xff1a;我这里服务器之前已经装过一个不同版本的mysql&#xff0c;已经占用了3306端口&#xff0c;所以这里我用3307端口来演示&#xff0c;命令和官方的稍有不同&#xff0c;不过步骤都是差不多的…

RobotFramework+Eclispe环境安装篇

环境安装是学习任何一个新东西的第一步&#xff0c;这一步没走舒坦&#xff0c;那后面就没有心情走下去了。 引用名句&#xff1a;工欲善其事必先利其器&#xff01;&#xff01; Robotframework&#xff1a;一款 自动化测试框架。 Eclipse&#xff1a;一款编辑工具。可以编…

HugeGraph Hubble 配置 https 协议的操作步骤

背景 HugeGraph 图数据库的 Server 端支持 https 配置&#xff0c;官方文档中有说明相对比较容易&#xff0c;而 Hubble 部署过程都是 http的。 我们有一个应用要嵌入 hubble 页面&#xff0c;而且部署为 https &#xff0c;那么 Hubble 是否支持配置 https 呢&#xff1f;网…

windows 设置nginx、redis、jar包开机自启、mysql自动备份

1、--------------设置nginx------------------- cd到nginx 根目录与nginx.exe平齐 1.1下载WinSW.NET4.exe 放入nginx.exe平齐目录命名为nginx-servier.exe 链接: https://pan.baidu.com/s/1obKTinD1Z9BKgMJxZMtk2Q?pwdg47u 提取码: g47u 复制这段内容后打开百度网盘手机App…

计算机网络【CN】IPV4报文格式

版本&#xff08;4bit&#xff09;&#xff1a;IPV4/IPV6首部长度&#xff08;4bit&#xff09;&#xff1a;标识首部的长度 单位是4B最小为&#xff1a;20B最大为&#xff1a;60&#xff08;15*4&#xff09;B总长度&#xff08;16bit&#xff09;&#xff1a;整个数据报&…

为什么自动驾驶需要5G?

什么叫自动驾驶&#xff1f; 自动驾驶分为6个等级&#xff1a; Level 0&#xff1a;人工驾驶&#xff0c;无驾驶辅助系统&#xff0c;仅提醒。 Level 1&#xff1a;辅助人工驾驶&#xff0c;可实现单一的车速或转向控制自动化&#xff0c;仍由人工驾驶&#xff08;如定速巡航…

[Database] MySQL 8.x Window / Partition Function (窗口/分区函数)

&#x1f9f2;相关文章 [1] MySQL 系统表解析以及各项指标查询 [2] MySQL 5.7 JSON 字段的使用的处理 [3] MySQL经典练习50题 简介 MySQL 8.0版本开始支持窗口函数 官方文档 在之前的版本中已存在的大部分聚合函数&#xff0c;在MySQL 8 中也可以作为窗口函数来使用 方法 / …

day11力扣打卡

打卡记录 避免洪水泛滥&#xff08;贪心 Map Set&#xff09; 链接 将晴天的日期全部记录到 set 中。 使用 unordered_map 来记录每个湖泊上一次下雨的日期。 当下雨时&#xff0c;湖泊已经水满了时&#xff0c;查询到上次下雨的日期。 通过这个日期在晴天记录中查找对应的…

第2篇 机器学习基础 —(2)分类和回归

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。机器学习中的分类和回归都是监督学习的问题。分类问题的目标是将输入数据分为不同的类别&#xff0c;而回归问题的目标是预测一个连续的数值。分类问题输出的是物体所属的类别&#xff0c;而回归问题输出的是数值。本节课就…

对mysql的联合索引的深刻理解

背景 对mysql的联合索引的考察是Java程序员面试高频考点&#xff01;必须深刻理解掌握否则容易丢分非常可惜。 技术难点 考察对最左侧匹配原理理解。 原理 暂且不表。网上讲这非常多。我理解就是&#xff0c;B树每个非叶子节点的值都是有序存放索引的值。 比如对A、B、C …

Unity中国、Cocos为OpenHarmony游戏生态插上腾飞的翅膀

2023年是OpenHarmony游戏生态百花齐放的一年&#xff01;为了扩展OpenHarmony游戏生态&#xff0c;OpenHarmony在基金会成立了游戏SIG小组&#xff0c;游戏SIG小组联合cocos&#xff0c;从cocos2dx入手一周内快速适配了cocos2.2.6的MVP版本&#xff0c;随后又分别适配了cocos2d…

【Leetcode】200. 岛屿数量

给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以假设该网格的四条边…