当前位置: 首页 > news >正文

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>

相关文章:

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

安装xlsx&#xff0c;一定要注意版本&#xff1a; npm i xlsx0.17.0 -S package.json&#xff1a; {"name": "hello-world","version": "0.1.0","private": true,"scripts": {"serve": "vue-c…...

Linux - 进程的优先级 和 如何使用优先级调度进程

理解linux 当中如何做到 把一个PCB 放到多个 数据结构当中 在Linux 当中&#xff0c;一个进程的 PCB 不会仅仅值存在一个 数据结构当中&#xff0c;他既可以在 某一个队列当中&#xff0c;又可以在 一个 多叉树当中。 队列比如 cpu 的 运行队列&#xff0c;键盘的阻塞队列等等…...

支持控件drag和click

在 MouseDown 事件触发 DoDragDrop 拖拽操作时&#xff0c;Click 事件通常无效&#xff0c;因为 DoDragDrop 方法会捕获鼠标事件并等待拖拽操作完成。 有一个简单地思路解决这个问题 当MouseDow时&#xff0c;触发定时器&#xff0c;延迟100s定时器到时后&#xff0c;进入dra…...

AIR101 LuatOS LVGL 显示多个标签例程

屏幕资料 AIR101与屏幕连接 PC端仿真环境合宙官方PC端版本环境搭建教程 PC电脑仿真 -- sys库是标配 _G.sys require("sys") sys.taskInit(function()local cnt0lvgl.init(480,320)--lvgl初始化local cont lvgl.cont_create(nil, nil);-- lvgl.cont_set_fit(cont, …...

Istio实战(七)- Bookinfo 部署

1. Istio Bookinfo示例 1.1 部署Bookinfo # kubectl apply -f /apps/istio/samples/bookinfo/platform/kube/bookinfo.yaml -n hr1.2 确认Bookinfo已经部署正常 先确认以下pod和service已经被正确创建 # kubectl get pods -n hr NAME READY …...

出差学小白知识No5:|Ubuntu上关联GitLab账号并下载项目(ssh key配置)

1 注冊自己的gitlab账户 有手就行 2 ubuntu安装git &#xff0c;并查看版本 sudo apt-get install git git --version 3 vim ~/.ssh/config Host gitlab.example.com User your_username Port 22 IdentityFile ~/.ssh/id_rsa PreferredAuthentications publickey 替换gitl…...

FL Studio21.2中文版多少钱?值得下载吗

水果&#xff0c;全称Fruity Loop Studio&#xff0c;简称FL Studio。是一款全能的音乐制作软件&#xff0c;经过二十多年的演化更迭&#xff0c;其各项功能非常的先进。其开创性的Pat\song模式&#xff0c;也为初学者的学习提供了便利。那么水果音乐制作软件需要多少钱呢&…...

软考系统架构师知识点集锦三:软件架构设计

一、考情分析 二、考点精讲 2.1软件架构的概念 2.1.1什么是架构(暂无定论) 架构设计就是需求分配&#xff0c;即将满足需求的职责分配到组件上。 软件架构风格是描述某-特定应用领域中系统组织方式的惯用模式。架构风格定义-个系统家族,即一个体系结构定义一个词汇表和一组约…...

docker - window Docker Desktop升级

文章目录 前言docker - window Docker Desktop升级 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来…...

Element UI + Vue 新增和编辑共用表单校验无法清除问题(已解决)

问题描述 在新增和编辑过程中大部分情况下 两个表单是一致的&#xff0c;而且编辑也有回显需要&#xff0c;所有绝大多数情况下 都是一个表单两个用处&#xff0c;但是随之而来出现了一个无法清除校验的问题&#xff0c;在先点击编辑后再点击新增会出现校验红字&#xff1a; …...

FL Studio21最新中文汉化解锁版,2024怎么激活FL Studio

FL Studio2024最新中文汉化解锁版是一款功能强大的数字音频工作站&#xff08;DAW&#xff09;&#xff0c;它广泛应用于音乐创作和音乐制作领域。在使用FL Studio时&#xff0c;购买正版软件是否有必要呢&#xff1f;本文将详细探讨FL Studio的功能特点以及正版软件的重要性。…...

Mac怎么清理磁盘空间?释放Mac磁盘空间有效方法

相信很多使用macOS系统的小伙伴都收到过提示“磁盘空间已满”消息&#xff0c;尤其是采用SSD固态硬盘的MacBook系列&#xff0c;120G的硬盘空间本就捉襟见肘&#xff0c;使用一段时间后&#xff0c;即使自己没有存放很多大文件&#xff0c; Mac的磁盘很快就满了。那么&#xff…...

论文阅读(一)城市干道分段绿波协调控制模型研究

[1]酆磊,赵欣,李林等.城市干道分段绿波协调控制模型研究[J].武汉理工大学学报(交通科学与工程版),2021,45(06):1034-1038. 主要内容:该文介绍了基于绿波带宽和关联度的城市干道分段绿波协调控制模型。通过将主干道划分为不同子区域,并根据路段特点进行精准化控制,实现了分段…...

k8s 部署nginx前端

1.构建docker镜像&#xff0c;k8s拉取镜像运行docker自己安装 [rootmaster1 ~]# docker pull nginx:1.24.0 [rootmaster1 ~]# mkdir k8s-nginx [rootmaster1 ~]# cd k8s-nginx [rootmaster1 k8s-nginx]# vim nginx.conf server_tokens off;server {listen 8010; #web访…...

ClickHouse UDF 官方示例Example报错解决方案

目录 一、环境版本二、官方示例三、解决方案1.Python脚本运行缺少权限2. 缺少Python3运行环境 四、参考借鉴 一、环境版本 环境版本docker clickhouse22.3.10.22 docker pull clickhouse/clickhouse-server:22.3.10.22二、官方示例 官网文档 test_function使用 XML 配置创建…...

eval()函数的用法,计算字符串中的值,模板字符串进行计算

eval函数的定义&#xff1a; eval() 函数计算 JavaScript 字符串&#xff0c;并把它作为脚本代码来执行。 如果参数是一个表达式&#xff0c;eval() 函数将执行表达式。如果参数是Javascript语句&#xff0c;eval()将执行 Javascript 语句。 let a1 10; let a2 20; let calcu…...

leetcode第80题:删除有序数组中的重复项 II

题目描述 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。 …...

【Docker】Docker-Compose内置DNS负载均衡失效问题

Docker Compose实现负载均衡 还是对前面的例子docker-compose.yml稍微修改&#xff1a; version: "3.8"services:flask-demo:build:context: .dockerfile: Dockerfileimage: flask-demo:latestenvironment:- REDIS_HOSTredis-server- REDIS_PASS${REDIS_PASS}healt…...

[Python]Selenium-自动化测试

Selenium是一个web自动化测试的工具,在使用之前先在对应的项目添加工具包噢. 本文章主要简单的介绍了selenium对于自动化测试的使用 目录 添加浏览器驱动 get函数来到对应网站 驱动的定位 元素定位 id定位 class name定位 CSS定位 XPath定位 link text定位 定位一…...

高效管理文件夹名称:如何批量修改指定多样化的文件夹名称

在文件管理工作中&#xff0c;文件夹名称的管理对于整体的文件管理体系有着至关重要的作用。然而&#xff0c;往往我们会在文件夹名称的管理上遇到一些难题&#xff0c;如&#xff1a;需要修改的文件夹名称多样化&#xff0c;无法一次性满足所有需求。为了解决这个问题&#xf…...

如何在树莓派上用TinyProxy搭建轻量级HTTP代理(附性能优化技巧)

树莓派上部署TinyProxy的工程实践与深度调优指南 当你在咖啡厅用树莓派搭建的微型服务器调试物联网设备时&#xff0c;突然发现所有外网请求都需要经过代理——这就是TinyProxy在嵌入式场景下的典型应用。不同于x86服务器的部署&#xff0c;在ARM架构的树莓派上运行代理服务需要…...

实战指南:借鉴vmware官网混合云方案,用快马平台生成高可用应用部署模板

今天在VMware官网上研究混合云方案时&#xff0c;发现他们的企业级架构设计特别值得借鉴。正好最近在用InsCode(快马)平台做项目部署&#xff0c;就尝试把官网的混合云方案转化成可落地的模板。整个过程比想象中顺利&#xff0c;分享下我的实战经验。 架构设计思路 VMware官网…...

AssetStudio终极指南:快速免费提取Unity游戏模型、纹理与音频资源

AssetStudio终极指南&#xff1a;快速免费提取Unity游戏模型、纹理与音频资源 【免费下载链接】AssetStudio 项目地址: https://gitcode.com/gh_mirrors/asse/AssetStudio AssetStudio是一款功能强大的开源工具&#xff0c;专为Unity游戏资源提取设计&#xff0c;能够轻…...

哈希冲突实战:用链地址法+表头插入优化你的查找性能(以LeetCode风格题为例)

哈希冲突实战&#xff1a;用链地址法表头插入优化你的查找性能&#xff08;以LeetCode风格题为例&#xff09; 哈希表是算法面试中的常客&#xff0c;但真正能说清楚其底层优化细节的开发者并不多。最近在帮团队面试候选人时&#xff0c;我发现90%的人能说出链地址法的基本概念…...

如何突破教育资源壁垒?智能解析工具让电子课本获取效率提升200%

如何突破教育资源壁垒&#xff1f;智能解析工具让电子课本获取效率提升200% 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#xff0c;让您更方便地获取课本内容。 …...

从SENet到KAN卷积:一文搞懂注意力机制如何从‘加权’进化到‘学习’(附演进路线图)

注意力机制的进化图谱&#xff1a;从SENet到KAN卷积的技术跃迁 在计算机视觉领域&#xff0c;注意力机制已成为提升模型性能的关键技术。本文将带您深入探索注意力机制从早期通道注意力到最新动态结构学习的完整演进历程&#xff0c;揭示这一技术如何从简单的特征重标定发展为能…...

生物信息学实战指南 | GSEA富集分析从原理到R语言实现

1. GSEA富集分析入门&#xff1a;为什么它比传统方法更强大 第一次接触GSEA&#xff08;Gene Set Enrichment Analysis&#xff09;时&#xff0c;我和大多数初学者一样困惑&#xff1a;明明已经有GO和KEGG这些传统富集分析方法了&#xff0c;为什么还要用GSEA&#xff1f;直到…...

耦合详解-模块

耦合详解 耦合(Coupling)是衡量软件模块之间相互依赖程度的指标。低耦合是优秀软件设计的核心目标之一,它使系统更易于维护、测试和扩展。 1. 耦合的本质 耦合描述的是两个模块(类、组件、服务)之间的依赖关系强度。当修改一个模块时,需要修改其他模块的程度越高,耦合…...

Claude Code 愚人节彩蛋:终端里的虚拟宠物伴侣

Claude Code 愚人节彩蛋&#xff1a;终端里的虚拟宠物伴侣 在 AI 编程助手的深处&#xff0c;藏着一个等待孵化的秘密——18 种 ASCII 精灵、5 级稀有度、完整的 RPG 属性系统。这可能是你见过的最可爱的命令行宠物。 意外的发现 在逆向分析 Claude Code 源码的过程中&#xf…...

二手交易平台信任度调查:闲鱼交易安全性深度解析

二手交易平台信任度调查&#xff1a;闲鱼交易安全性深度解析随着循环经济的兴起&#xff0c;中国二手交易市场规模在2023年突破万亿元大关。作为阿里巴巴旗下的C2C二手交易平台&#xff0c;闲鱼凭借5亿注册用户和日均10亿元的交易规模&#xff0c;已成为国内最大的闲置物品流转…...