Vue2.0/Vue3.0使用xlsx+xlsx-style实现导出Excel文件

一、依赖导入

1、Vue2 + Webpack构建的

npm i xlsx
npm i xlsx-style
npm i file-saver

同时修改以下:
解决 Can’t resolve ‘./cptable’ in ‘…’ 的问题,在 vue.config.js 文件中加入该配置

module.exports = {externals: {'./cptable': 'var cptable'}
}

2、Vue3 + Vite构建的
npm i xlsx
npm i xlsx-style-vite

二、导入项目

import * as XLSX from 'xlsx'
import * as XLSX_STYLE from 'xlsx-style' // Vue2 + Webpack
import * as XLSX_STYLE from 'xlsx-style-vite' // Vue3 + Vite
import FileSaver from 'file-saver' //保存下载

三、项目示例

const exportExcel = () => {let table = [// 表格表头 ["能耗周期", '燃气消耗量(m³)', '水消耗量(m³)', "电消耗量(kwh)", "供热消耗量(m³)"]];state.tableData.forEach((item, index) => {let rowData = [];//导出内容的字段 rowData = [index + 1, item.date_month, item.zlconut, item.jscount]table.push(rowData)});let bookNew = XLSX.utils.book_new();let workSheet = XLSX.utils.aoa_to_sheet(table);XLSX.utils.book_append_sheet(bookNew, workSheet, '企业能耗统计')// 设置单元格宽度 workSheet['!cols'] = [{wpx: 80}, {wpx: 100}, {wpx: 100}, {wpx: 100}];// 导出Excel, 注意这里用到的是XLSXS对象 let wbout = XLSXS.write(bookNew, {bookType: 'xlsx',bookSST: false,type: 'binary',})FileSaver.saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}),'企业能耗统计.xlsx');}const s2ab = (s) => {var buf = new ArrayBuffer(s.length)var view = new Uint8Array(buf)for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xffreturn buf}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

l8-d6 socket套接字及TCP的实现框架

一、socket套接字 /*创建套接字*/ int socket(int domain, int type, int protocol); /*绑定通信结构体*/ int bind(int sockfd, const struct sockaddr *addr, socklen_t addrlen); /*监听套接字*/ int listen(int sockfd, int backlog); /*处理客户端发起的连接&#xff0…

C++ 表驱动方法代替if-else

连着用几十个if-else代码&#xff0c;运行效率不高&#xff0c;关键还手累,记得改成表驱动方法 #include <iostream> #include <unordered_map> #include <functional>using namespace std;void handleCondition1() {// 处理条件 1 的代码std::cout <<…

智能合约安全,著名的区块链漏洞:双花攻击

智能合约安全&#xff0c;著名的区块链漏洞&#xff1a;双花攻击 介绍: 区块链技术通过提供去中心化和透明的系统彻底改变了各个行业。但是&#xff0c;与任何技术一样&#xff0c;它也不能免受漏洞的影响。一个值得注意的漏洞是双花攻击。在本文中&#xff0c;我们将深入研究…

【数据结构练习】栈的面试题集锦

目录 前言&#xff1a; 1.进栈过程中可以出栈的选择题 2.将递归转化为循环 3.逆波兰表达式求值 4.有效的括号 5. 栈的压入、弹出序列 6. 最小栈 前言&#xff1a; 数据结构想要学的好&#xff0c;刷题少不了&#xff0c;我们不仅要多刷题&#xff0c;还要刷好题&#x…

16-MyCat

一 Mycat概述 1 什么是Mycat 什么是Mycat Mycat是数据库中间件&#xff0c;所谓数据库中间件是连接Java应用程序和数据库中间的软件。 为什么要用Mycat 遇到问题&#xff1a; Java与数据库的紧耦合高访问量高并发对数据库的压力读写请求数据不一致 2 Mycat与其他中间件区别 目…

【USRP】调制解调系列6:16APSK、32APSK 、基于labview的实现

APSK APSK是&#xff0c;与传统方型星座QAM&#xff08;如16QAM、64QAM&#xff09;相比&#xff0c;其分布呈中心向外沿半径发散&#xff0c;所以又名星型QAM。与QAM相比&#xff0c;APSK便于实现变速率调制&#xff0c;因而很适合目前根据信道及业务需要分级传输的情况。当然…

分布式环境下的数据同步

一般而言elasticsearch负责搜索&#xff08;查询&#xff09;&#xff0c;而sql数据负责记录&#xff08;增删改&#xff09;&#xff0c;elasticsearch中的数据来自于sql数据库&#xff0c;因此sql数据发生改变时&#xff0c;elasticsearch也必须跟着改变&#xff0c;这个就是…

jmeter调试错误大全

一、前言 在使用jmeter做接口测试的过程中大家是不是经常会遇到很多问题&#xff0c;但是无从下手&#xff0c;不知道从哪里开始找起&#xff0c;对于初学者而言这是一个非常头痛的事情。这里结合笔者的经验&#xff0c;总结出以下方法。 二、通过查看运行日志调试问题 写好…

STM32存储左右互搏 I2C总线读写FRAM MB85RC16

STM32存储左右互搏 I2C总线读写FRAM MB85RC16 在较低容量存储领域&#xff0c;除了EEPROM的使用&#xff0c;还有铁电存储器FRAM的使用&#xff0c;相对于EEPROM, 同样是非易失性存储单元&#xff0c;FRAM支持更高的访问速度&#xff0c; 其主要优点为没有EEPROM持续写操作跨页…

laravel 报错误信息 Carbon\Exceptions\InvalidFormatException

Carbon\Exceptions\InvalidFormatException Unexpected data found. at vendor\nesbot\carbon\src\Carbon\Traits\Creator.php:687 683▕ return $instance; 684▕ } 685▕ 686▕ if (static::isStrictModeEnabled()) { ➜ 687…

Python虚拟环境venv下安装playwright介绍及记录

playwright介绍 Playwright是一个用于自动化Web浏览器测试和Web数据抓取的开源库。它由Microsoft开发&#xff0c;支持Chrome、Firefox、Safari、Edge和WebKit浏览器。Playwright的一个主要特点是它能够在所有主要的操作系统&#xff08;包括Windows、Linux和macOS&#xff09…

什么是交叉验证

交叉验证&#xff08;Cross-Validation&#xff0c;简称CV&#xff09;是一种统计学方法&#xff0c;用于评估机器学习模型的性能。它的主要目的是确保模型在新的、未见过的数据上也能表现得很好&#xff0c;从而避免过拟合。以下是交叉验证的基本概念和常见方法&#xff1a; …

K8S获取连接token

1、创建一个具有管理员权限的账户 下载或拷贝文件到主机上&#xff0c;vi k8s-admin.yml --- apiVersion: v1 kind: ServiceAccount metadata:name: dashboard-adminnamespace: kube-system --- kind: ClusterRoleBinding apiVersion: rbac.authorization.k8s.io/v1beta1 met…

计算机毕设 大数据商城人流数据分析与可视化 - python 大数据分析

文章目录 0 前言课题背景分析方法与过程初步分析&#xff1a;总体流程&#xff1a;1.数据探索分析2.数据预处理3.构建模型 总结 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到…

SMU200A/罗德与施瓦茨SMU200A信号发生器

181/2461/8938产品概述 R&S SMU200A信号发生器旨在满足现代通信系统研发及其生产中遇到的所有要求。R&S SMU200A矢量信号发生器不仅将多达两个独立的信号发生器组合在一个只有四个高度单位的机柜中&#xff0c;还提供无与伦比的RF和基带特性。 Rohde & Schwarz S…

Vue3数值动画(NumberAnimation)

效果如下图&#xff1a;在线预览 APIs 参数说明类型默认值必传from数值动画起始数值number0falseto数值目标值number1000falseduration数值动画持续时间&#xff0c;单位msnumber3000falseautoplay是否自动开始动画booleantruefalseprecision精度&#xff0c;保留小数点后几位…

3.flask-sqlalchemy ORM库

介绍 Flask-SQLAlchemy是一个用于Flask的扩展&#xff0c;它提供了一个便捷的方式来处理数据库操作。Flask-SQLAlchemy基于SQLAlchemy&#xff0c;一个功能强大的Python SQL工具包和对象关系映射&#xff08;ORM&#xff09;系统 官网文档:http://www.pythondoc.com/flask-sql…

NineData 中标移动云数据库传输项目

导读近日&#xff0c;玖章算术 NineData 智能数据管理平台成功中标《2023 年移动云数据库传输服务软件项目》&#xff0c;中标金额为 406 万。这标志着玖章算术 NineData 平台已成功落地顶级运营商行业&#xff0c;并在数据管理方面实现了大规模应用实践。 NineData 中标 2023 …

SQLite简单介绍

一.简单介绍 SQLite是一款轻型的数据库&#xff0c;是遵守ACID的关系型数据库管理系统&#xff0c;它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的&#xff0c;而且已经在很多嵌入式产品中使用了它&#xff0c;它占用资源非常的低&…

Java的选择排序、冒泡排序、插入排序

不爱生姜不吃醋 如果本文有什么错误的话欢迎在评论区中指正 与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 &#x1f334;前言&#x1f334;一、选择排序1.原理2.时间复杂度3.代码实现 &#x1f334;二、冒泡排序1. 原理2. 时间复杂度3.代码实现 &#x1f334;三…