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

vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库)

xlsx

xlsx是由SheetJS开发的一个处理excel文件的npm库

适用于前端开发者实现导入导出excel文件的经典需求

为了区别于xlsx文件,突出其应用语言,该库通常又被称为js-xlsx

导出js数据为Excel文件

需要以下步骤:

  1. 安装 xlsx 库 你可以使用 npm 包管理器安装 xlsx 库,也可以将 xlsx 下载到本地,然后在 HTML 文件中通过 script 标签引入。
  2. 准备数据 将需要导出的数据准备好,并将其存储为一个数组或对象。
  3. 创建工作簿 通过 xlsx 库的 utils.book_new() 方法创建一个工作簿(workbook)对象,该对象包含一个或多个工作表(worksheet)。
  4. 创建工作表 通过 xlsx 库的 utils.json_to_sheet() 方法创建一个工作表,并将准备好的数据作为参数传入该方法。如果需要创建多个工作表,可以多次调用该方法,并将它们添加到工作簿对象中。
  5. 将工作表添加到工作簿 通过 xlsx 库的 utils.book_append_sheet() 方法将创建好的工作表添加到工作簿对象中。
  6. 导出数据 通过 xlsx 库的 writeFile() 方法将工作簿对象导出为 Excel 文件。你可以指定导出的文件名和文件格式,比如 .xlsx.csv

以下是一个使用 xlsx 库将数据导出为 Excel 文件的示例代码:

vue

<script setup>
import * as XLSX from "xlsx/xlsx.mjs";
const download = () => {const data = [["姓名", "年龄", "性别"],["张三", 18, "男"],["李四", 22, "女"],["王五", 25, "男"],];const workbook = XLSX.utils.book_new();const worksheet = XLSX.utils.json_to_sheet(data);XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");XLSX.writeFile(workbook, "data.xlsx");
};
</script><template><button @click="download">导出</button>
</template>

导入Excel文件生成js数据

  1. 使用input type="file"选择xlsx文件
  2. 使用fileReader读取文件为二进制编码
  3. XLSX.read方法处理二进制编码为worksheet对象
  4. XLSX.utils.sheet_to_json转换worksheet对象为json数据,实际上就是js数组
  5. 最后处理数组数据为自己想要的格式即可
<template><article><p>导入高德地图xlsx文件</p><input type="file" ref="upload" accept=".xls,.xlsx" /></article>
</template><script>
import XLSX from "xlsx"
export default {mounted() {// 监听表格导入事件this.$refs.upload.addEventListener("change", e => {this.readExcel(e)})},methods: {readExcel(e) {//表格导入const files = e.target.files//如果没有文件名,不往下执行if (files.length <= 0) return// 上传文件格式不正确,非xls或者xlsx格式文件,不往下执行if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) returnconst fileReader = new FileReader()// readAsBinaryString将文件读取为二进制编码fileReader.readAsBinaryString(files[0])// 读取完成fileReader.onload = ev => {try {// 二进制数据const data = ev.target.result// xlsx处理二进制数据const workbook = XLSX.read(data, {type: "binary"})//取第一张表const wsname = workbook.SheetNames[0] // 根据表格内容生成json数据const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) const outputs = [] //清空接收数据for (let i = 0; i < ws.length; i++) {const sheetData = {value: ws[i].adcode,label: ws[i].中文名}outputs.push(sheetData)}} catch (e) {console.log(e)}}}}
}
</script>

xlsx-js-style库使用

xlsx基础库不提供样式设置,可以使用xlsx-js-style库,这个库是xlsx库的fork版本,并添加了样式定义

详细样式可以查看https://github.com/gitbrent/xlsx-js-style/

可以调节背景色、字体样式、border

npm i -s xlsx-js-style
<script setup>
import XLSX from "xlsx-js-style";
console.log();
const download = () => {const wb = XLSX.utils.book_new();const ws = XLSX.utils.aoa_to_sheet([["Hello", "World"],[1, 2],]);// 在单元格对象中添加 `s` 属性来设置该单元格的样式ws["A1"].s = {font: { bold: true },alignment: { horizontal: "center" },fill: { fgColor: { rgb: "FFFF0000" } },};ws["B2"].s = {alignment: { horizontal: "center" },font: { bold: true },fill: { fgColor: { rgb: "FFFF0000" } },};XLSX.utils.book_append_sheet(wb, ws, "Sheet1");XLSX.writeFile(wb, "example.xlsx");
};
</script>

去掉标题头

XLSX.utils.json_to_sheet默认使用Object.keys生成头部

所以如下数据格式不加上skipHeader: true,会出现0 1 2的索引头部

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {const data = [["姓名", "年龄", "性别"],["张三", 18, "男"],["李四", 22, "女"],["王五", 25, "男"],];const wb = XLSX.utils.book_new();const ws = XLSX.utils.json_to_sheet(data, {skipHeader: true,});XLSX.utils.book_append_sheet(wb, ws, "Sheet1");XLSX.writeFile(wb, "example.xlsx");
};
</script><template><button @click="download">导出</button>
</template>

设置列宽

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {const data = [{ 姓名: "张三", 年龄: 18, 性别: "男" },{ 姓名: "李四", 年龄: 20, 性别: "女" },{ 姓名: "王五", 年龄: 22, 性别: "男" },];const wb = XLSX.utils.book_new();const ws = XLSX.utils.json_to_sheet(data);ws["!cols"] = [{wpx: 150,},{wpx: 500,},{wpx: 100,},];XLSX.utils.book_append_sheet(wb, ws, "Sheet1");XLSX.writeFile(wb, "example.xlsx");
};
</script><template><button @click="download">导出</button>
</template>

合并单元格

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {const data = [{ 姓名: "张三", 年龄: 18, 性别: "男" },{ 姓名: "李四", 年龄: 20, 性别: "女" },{ 姓名: "王五", 年龄: 22, 性别: "男" },];const wb = XLSX.utils.book_new();const ws = XLSX.utils.json_to_sheet(data);// s 表示要合并的单元格范围的左上角单元格,r 表示该单元格的行号,c 表示该单元格的列号,行列号从 0 开始计数。所以 { r: 0, c: 0 } 表示第 1 行第 1 列的单元格,即 A1 单元格。// e 表示要合并的单元格范围的右下角单元格,其含义与 s 相同。所以 { r: 0, c: 1 } 表示第 1 行第 2 列的单元格,即 B1 单元格。// 因此,{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } 表示要合并第 1 行第 1 列和第 1 行第 3 列之间的元格。// 注意,合并会以开始位置单元格中的内容为准,所以合并后的单元格中的内容为 A1 单元格中的内容。ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];XLSX.utils.book_append_sheet(wb, ws, "Sheet1");XLSX.writeFile(wb, "example.xlsx");
};
</script><template><button @click="download">导出</button>
</template>

相关文章:

vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库)

xlsx xlsx是由SheetJS开发的一个处理excel文件的npm库 适用于前端开发者实现导入导出excel文件的经典需求 为了区别于xlsx文件&#xff0c;突出其应用语言&#xff0c;该库通常又被称为js-xlsx 导出js数据为Excel文件 需要以下步骤&#xff1a; 安装 xlsx 库 你可以使用 …...

java 线程池

线程池 是 一个 容器&#xff0c;其中管理着多个线程&#xff08;预先创建并维护一定数量的线程&#xff09;&#xff0c;当有一个任务a需要一个线程去完成时&#xff0c;从容器&#xff08;线程池&#xff09;中获取一个线程A去执行任务a,当线程A完成任务a后&#xff0c;线程A…...

音频焦点使用及原理

音频焦点使用及原理 本博客代码基于Android 10源码 为什么会有音频焦点这一概念&#xff1f; 在Android音频领域中&#xff0c;应用层所有的App播放音频&#xff0c;最终都是走到音频回播线程PlaybackThread中&#xff0c;如果多个App都走到同一个PlaybackThread中去&#xff0…...

PyQt5桌面应用开发(8):从QInputDialog转进到函数参数传递

本文目录 PyQt5桌面应用系列How old are you, Dialog?QInputDialog minimalistwhy not lambdaand how partial worksSummary PyQt5桌面应用系列 PyQt5桌面应用开发&#xff08;1&#xff09;&#xff1a;需求分析 PyQt5桌面应用开发&#xff08;2&#xff09;&#xff1a;事件…...

2.0 Vue框架设计的核心要素

本章主要讲解&#xff0c;一个好的框架在构建的时候&#xff0c;需要考虑到的要素&#xff0c;包含报错信息反馈、警告信息反馈、减少打包体积、良好的输出、特性开关&#xff08;兼容&#xff09;等 1、提升用户开发体验 提升用户开发体验主要体现在用户使用框架进行开发时&…...

“智慧赋能 强链塑链”——精细化工行业仓储物流数字化转型探讨

精细化工行业作为衡量国家化学工业水平高低的重要标志&#xff0c;为国民经济提供重要的终端产品支持&#xff0c;相比较大化工产品&#xff0c;精细化工产品需要高度专业技能和工艺&#xff0c;其生产过程需要复杂的化学反应&#xff0c;以及严格的控制条件&#xff0c;产出的…...

用DG备库做的rman备份恢复一个数据库

环境描述&#xff1a; 1.因为主库存储空间不足&#xff0c;于是将备份放在dg备库上做。 2.主库因为磁盘空间问题&#xff0c;数据文件有两个目录。 3.dg备库因为主库两个数据文件目录里面有两个同名数据文件&#xff0c;所有dg备库也有两个数据文件目录。 4.主库与备库与测…...

JAVA中的IO操作有哪些?

在Java编程语言中&#xff0c;输入/输出&#xff08;IO&#xff09;操作是很重要的部分&#xff0c;它允许程序从外部系统读取数据&#xff0c;或将数据输出到外部系统。Java提供了一组强大的IO类库&#xff0c;可以让开发人员方便地进行各种IO操作。 Java中的IO操作可以分为两…...

10:00面试,10:04就出来了 ,问的实在是太...

从外包出来&#xff0c;没想到竟然死在了另一家厂子 自从加入这家公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以我也就忍了。没想到12月一纸通知&#xff0c;所有人都不许加班&#xff0c;薪资直降30%&#xff0c;顿时有吃不起饭的赶脚。 好在有个…...

wangzherongyao PMO

感谢【五一节】大家的相遇&#xff0c;总结下。 2023年05月02日&#xff0c;【第一组】组队开黑 我总结了下这天为什么打的那么好&#xff0c;首先赛季初段位在王者附近&#xff0c;大家心态重视程度也高&#xff0c;不轻敌&#xff0c;也不盲目&#xff0c;运营好兵线一步一步…...

Dart语法上

一、Dart介绍及环境 1.1 Dart介绍&#xff1a; Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。Dart诞生于2011年&#xff0c;号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。 要学…...

SignOff Criteria——POCV(Parametric OCV) introduction

文章目录 1. O v e r v i e w Overview Overview2. P O C V A n a l y s i s POCV\ Analysis POCV Analysis3. P O C V F l o w POCV\ Flow POCV Flow4. P O C V R e p o r t POCV\ Report POCV Report 1. O v e r v i e w Overview Overview P r o c e s s v a r i a t i…...

Android 内存分析(java/native heap内存、虚拟内存、处理器内存 )

1.jvm 堆内存(dalvik 堆内存) 不同手机中app进程的 jvm 堆内存是不同的&#xff0c;因厂商在出厂设备时会自定义设置其峰值。比如,在Android Studio 创建模拟器时&#xff0c;会设置jvm heap 默认384m , 如下图所示&#xff1a; 当app 进程中java 层 new 对象(加起来总和)占用…...

产品思维与工程师思维

目录标题 什么是产品思维用户痛点体验价值 产品思维与工程师思维有什么区别&#xff1f;产品需要什么能力洞察需求的能力逻辑思维能力成本意识 场景化思维和用户体验数据分析和售后服务数据分析服务大多数用户原则 什么是产品思维 产品思维就是考虑产品的方方面面&#xff0c;…...

Android---启动速度优化

App 启动流程 1. 点击桌面 App 图标&#xff0c;Launcher 进程采用 Binder IPC 向 system_server 进程发起 startActivity 请求 &#xff1b; 2. system_server 进程接收到请求后&#xff0c;向 zygote 进程发送创建进程的请求&#xff1b; 3. zygote 进程 fork 出新的子进程…...

使用 Mercury 直接从 Jupyter 构建 Web 程序

动动发财的小手&#xff0c;点个赞吧&#xff01; 有效的沟通在所有数据驱动的项目中都至关重要。数据专业人员通常需要将他们的发现和见解传达给利益相关者&#xff0c;包括业务领导、技术团队和其他数据科学家。 虽然传达数据见解的传统方法&#xff08;如 PowerPoint 演示文…...

Python基础(二)

目录 一、类型转换 1、为什么需要数据类型转换 2、数据类型转化的函数 3、str()函数类型转换使用 4、int()函数类型转换使用 4.1int()不能将str类型数据转换成int 4.2int()将bool类型转换成int 4.3int()将float转换成int 5、Float()函数类型转换使用 5.1Float()函数不…...

第41讲:Python循环语句中的break-else语法结构

文章目录 1.在循环正常结束后执行动作的思路2.通过控制布尔值变量的方式在循环正常结束后执行某些操作2.1.while循环语句2.2.for-in循环语句3.通过else从句来执行某些操作1.在循环正常结束后执行动作的思路 在执行while循环语句或者for循环语句时,如果循环是正常结束的,非执…...

双系统-真机安装ubuntu

服务器系统最好选择legacy启动mbr硬盘,数据盘可以使用gpt格式,超过2t的只能用gpt。 华为2288v3用uefi找不到启动硬盘,或者是找到硬盘后无法引导,迁移系统得到有efi引导文件的硬盘也不行,选择用legacy吧。 ubuntu默认uefi启动,若使用legacy,则需要easybcd处理一下引导。 …...

Android实现向facebook回复消息代码

以下是一个示例代码&#xff0c;它基于Facebook SDK版本5.0&#xff0c;具体实现如下&#xff1a; 1. 集成Facebook SDK库 下载Facebook SDK并将其加入到Android Gradle构建文件中&#xff0c;像这样&#xff1a; groovy dependencies { implementation com.facebook.an…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...