在Vue.js中使用xlsx组件实现Excel导出

        在现代Web应用程序中，数据导出到Excel格式是一项常见的需求。Vue.js是一种流行的JavaScript框架，允许我们构建动态的前端应用程序。本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能。

1、项目设置

        首先，在控制台执行以下命令安装xlsx组件；

npm install xlsx --save或yarn add xlsx --save

        然后，在vue项目中引入xls组件；

import XLSX from 'xlsx';

2、准备数据

        要导出到Excel，您需要有数据。您可以使用本地数据或从API获取数据。在本示例中，我们将使用本地数据：


exportData: [{ name: "John", age: 30, city: "New York" },{ name: "Alice", age: 25, city: "Los Angeles" },{ name: "Bob", age: 35, city: "Chicago" }
]

3、实现导出功能

        创建导出到Excel的方法。这个方法将触发Excel文件的生成和下载：

exportToExcel() {const worksheet = XLSX.utils.json_to_sheet(this.exportData);const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");XLSX.writeFile(workbook, "exported-data.xlsx");
}

        这个方法使用xlsx组件将数据转换为Excel工作表，然后创建一个工作簿并将工作表添加到工作簿中。最后，它使用XLSX.writeFile方法将工作簿保存为名为"exported-data.xlsx"的Excel文件。

4、设置列宽自适应

        根据导出数据的长度，通过遍历计算每列的最大长度，然后通过worksheet['!cols']方法设置每列宽度；

// 设置列宽exportData.forEach((row, rowIndex) => {  row.forEach((cell, cellIndex) => { const list = arrData.map(item => {const val = item[cellIndex] as string;if(isEmptyString(val)){return 1;} else if(val.toString().charCodeAt(0) > 255){ // 判断是否有中文return val.toString().length * 2} else{return val.toString().length;}});const maxLength = Math.max(...list);  const width = maxLength * 1.1; // 根据实际内容长度自动调整列宽  if(!worksheet["!cols"]) worksheet["!cols"] = [];if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 来设置列宽});});

5、设置合并单元格

        通过worksheet["!merges"]方法可以设置合并单元格；

// 合并单元格merges.forEach((item) => {if(!worksheet["!merges"]){worksheet["!merges"] = [];};worksheet["!merges"].push(item);// worksheet["!merges"].push({//   s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"//   e: { r: 3, c: 4 }  // e ("end"):   c = 4 r = 3 -> "E4"// });});

6、设置导出Excel表格的样式

        xlsx组件库是不支持设置Excel表格样式的，但是可以通过引入xlsx-style-vite组件库来实现样式的设置；然后通过file-saver导出文件；

6.1 安装并引入xlsx-style-vite和file-saver组件
yarn add xlsx-style-vite --saveyarn add file-saver --save
import XLSXStyle from 'xlsx-style-vite';
import XLSX_SAVE from 'file-saver';

其中 xlsx-style-vite组件是xlsx-style组件的vite版本，用于解决在vite下引入xlsx-style异常的问题；

6.2 设置单元格居中

       遍历所有单元格，然后通过worksheet[column].s方法设置每个单元格的样式；

exportData.forEach((row, rowIndex) => {  row.forEach((cell, cellIndex) => { // 设置所有单元格居中let column = utils.encode_cell({c: cellIndex, r: rowIndex});      worksheet[column].s = {alignment: {horizontal: 'center',vertical: 'center',wrapText: false, // 自动换行},}        });});
6.3 设置单元格背景色和字体
exportData.forEach((row, rowIndex) => {  row.forEach((cell, cellIndex) => { // 设置所有单元格居中let column = utils.encode_cell({c: cellIndex, r: rowIndex});if(worksheet[column]){// 设置背景色、加粗展示worksheet[column].s = {font: {name: "微软雅黑",sz: 16,color: { rgb: "000000" },bold: true,italic: false,underline: false,},fill: {fgColor: { rgb: "C5D9F1" },},alignment: {horizontal: 'center',vertical: 'center',wrapText: false, // 自动换行},}}}});});
6.4 设置单元格边框
  //单元格外侧框线const borderAll = {top: {style: "thin",},bottom: {style: "thin",},left: {style: "thin",},right: {style: "thin",},};// 设置单元格边框arrData.forEach((row, rowIndex) => {  row.forEach((cell, cellIndex) => { let column = utils.encode_cell({c: cellIndex, r: rowIndex});if(worksheet[column]){       worksheet[column].s = {border: borderAll,}}}});});
6.5 导出文件

       必须通过file-saver组件导出Excel文件，不能通过xlsx组件的writeFile方法导出文件，否则样式无法生效；

const wbout = XLSXStyle.write(workbook, {type: 'binary',bookType: 'xlsx',});XLSX_SAVE.saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream',}),'exported-data.xlsx',);// 数据转换
function 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) & 0xFF;return buf;
}

7、完整代码示例

import * as xlsx from 'xlsx';
import type { WorkBook } from 'xlsx';
import type { JsonToSheet, AoAToSheet } from './typing';
import XLSXStyle from 'xlsx-style-vite';
import XLSX_SAVE from 'file-saver';
import { isEmptyString } from '@/utils/table';const { utils, writeFile } = xlsx;const DEF_FILE_NAME = 'excel-list.xlsx';export function aoaToSheetXlsx<T = any>({data,header,filename = DEF_FILE_NAME,write2excelOpts = { bookType: 'xlsx' },merges = [],
}: AoAToSheet<T>) {const arrData = [...data];  if (header) {    arrData.unshift(header);}const worksheet = utils.aoa_to_sheet(arrData);/* add worksheet to workbook */const workbook: WorkBook = {SheetNames: [filename],Sheets: {[filename]: worksheet,},};//单元格外侧框线const borderAll = {top: {style: "thin",},bottom: {style: "thin",},left: {style: "thin",},right: {style: "thin",},};// 设置列宽arrData.forEach((row, rowIndex) => {  row.forEach((cell, cellIndex) => { const list = arrData.map(item => {const val = item[cellIndex] as string;if(isEmptyString(val)){return 1;} else if(val.toString().charCodeAt(0) > 255){ // 判断是否有中文return val.toString().length * 2} else{return val.toString().length;}});const maxLength = Math.max(...list);  const width = maxLength * 1.1; // 根据实际内容长度自动调整列宽  if(!worksheet["!cols"]) worksheet["!cols"] = [];if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 来设置列宽// 设置所有单元格居中let column = utils.encode_cell({c: cellIndex, r: rowIndex});if(worksheet[column]){if(rowIndex === 0) {  // 标题行设置背景色、加粗展示worksheet[column].s = {border: borderAll,font: {// name: "微软雅黑",// sz: 16,color: { rgb: "000000" },bold: true,italic: false,underline: false,},fill: {fgColor: { rgb: "C5D9F1" },},alignment: {horizontal: 'center',vertical: 'center',wrapText: false, // 自动换行},}} else {worksheet[column].s = {alignment: {horizontal: 'center',vertical: 'center',wrapText: false, // 自动换行},}}}});});  // 合并单元格merges.forEach((item) => {if(!worksheet["!merges"]){worksheet["!merges"] = [];};worksheet["!merges"].push(item);// worksheet["!merges"].push({//   s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"//   e: { r: 3, c: 4 }  // e ("end"):   c = 4 r = 3 -> "E4"// });});const wbout = XLSXStyle.write(workbook, {type: 'binary',bookType: 'xlsx',});XLSX_SAVE.saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream',}),`${filename}.${write2excelOpts.bookType}`,);/* output format determined by filename */// writeFile(workbook, filename, write2excelOpts);/* at this point, out.xlsb will have been downloaded */
}// 数据转换
function 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) & 0xFF;return buf;
}

新时代农民工

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

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

相关文章

idea 设置serlvet 类模板（快捷生成servlet类）

idea 设置serlvet 类模板（快捷生成servlet类）

我的版本是idea2020.3.4&#xff0c;博客中有相应安装教程&#xff0c;其他版本设置类似&#xff1a; 1.选择文件-->设置 2.选择编辑器-->文件和代码模板-->其他 3.选择Web-->Servlet Annotated Class.java-->复制相应模板&#xff0c;下面顺便设置了注释模板 …
阅读更多...
区块链轻节点的问答

区块链轻节点的问答

EOS的nodeos并没有获取merkle proof的功能&#xff0c;那应该怎样获取merkle proof nodeos&#xff08;EOS区块链节点软件&#xff09;本身并不提供Merkle Proof的功能&#xff0c;而是全节点或其他数据源通常提供Merkle Proof。获取Merkle Proof的过程通常需要与全节点或区块浏…
阅读更多...
【Docker】Docker Compose的使用

【Docker】Docker Compose的使用

我们知道使用一个Dockerfile模板文件&#xff0c;可以让用户很方便的定义⼀个单独的应用容器。然而&#xff0c;在日常工作中&#xff0c;经常会碰到需要多个容器相互配合来完成某项任务的情况。 例如要实现一个Web项目&#xff0c;除了Web服务容器本身&#xff0c;往往还需要…
阅读更多...
如何在Linux将Spring Boot项目的Jar包注册为开机自启动系统服务

如何在Linux将Spring Boot项目的Jar包注册为开机自启动系统服务

有时候我们需要将Spring Boot打包出来jar文件当做系统服务注册到系统中&#xff0c;本文教你如何操作 目录结构 以下是目录结构&#xff0c;jar文件是从maven package打包出来的&#xff0c;config/application.yml是原先在项目的resources文件夹里&#xff0c;外置出来方便适…
阅读更多...
什么是IO多路复用？Redis中对于IO多路复用的应用？

什么是IO多路复用？Redis中对于IO多路复用的应用？

IO多路复用是一种高效的IO处理方式&#xff0c;它允许一个进程同时监控多个文件描述符&#xff08;包括套接字、管道等&#xff09;&#xff0c;并在有数据可读或可写时进行相应的处理。这种机制可以大大提高系统的并发处理能力&#xff0c;减少资源的占用和浪费。 在Redis中&…
阅读更多...
m1 安装 cocoapods

m1 安装 cocoapods

其实最终解决问题很简单&#xff0c;麻烦的是如果找到解决问题的答案。 网上的答案一大堆&#xff0c;但不一定适合你的电脑&#xff0c;就好像天下的女人到处有&#xff0c;但不一定都适合你&#xff0c;一定要亲自试验一下才知道结果。 前提条件&#xff1a; 命令行工具&am…
阅读更多...
Leetcode 18 三数之和

Leetcode 18 三数之和

//双指针&#xff0c;不过因为是三个数所以左侧是两个下标class Solution {public List<List<Integer>> threeSum(int[] nums) {int n nums.length;Arrays.sort(nums);List<List<Integer>> ans new ArrayList<List<Integer>>();for(int …
阅读更多...
优思学院：六西格玛培训中的“绿带”和“黑带”

优思学院：六西格玛培训中的“绿带”和“黑带”

在当今竞争激烈的商业世界中&#xff0c;提高效率、减少浪费是每个组织都追求的目标。为了达到这一目标&#xff0c;六西格玛管理方法为组织提供了一个卓越的工具。在六西格玛培训中&#xff0c;我们经常会听到“绿带”和“黑带”这两个术语。那么&#xff0c;究竟什么是绿带和…
阅读更多...
Unity之ShaderGraph如何实现旋涡效果

Unity之ShaderGraph如何实现旋涡效果

前言 今天我们来通过ShaderGraph来实现一个旋涡的效果 如下图所示： 主要节点 Distance：返回输入 A 和输入 B 的值之间的欧几里德距离。除了其他方面的用途，这对于计算空间中两点之间的距离很有用，通常用于计算有符号距离函数 (Signed Distance Function)。 Twirl：将…
阅读更多...
[数据分析与可视化] 基于Python绘制简单动图

[数据分析与可视化] 基于Python绘制简单动图

动画是一种高效的可视化工具&#xff0c;能够提升用户的吸引力和视觉体验&#xff0c;有助于以富有意义的方式呈现数据可视化。本文的主要介绍在Python中两种简单制作动图的方法。其中一种方法是使用matplotlib的Animations模块绘制动图&#xff0c;另一种方法是基于Pillow生成…
阅读更多...
机器学习实验一：KNN算法，手写数字数据集(使用汉明距离)（2）

机器学习实验一：KNN算法，手写数字数据集(使用汉明距离)（2）

KNN-手写数字数据集&#xff1a; 使用sklearn中的KNN算法工具包&#xff08; KNeighborsClassifier)替换实现分类器的构建&#xff0c;注意使用的是汉明距离&#xff1b; 运行结果&#xff1a;&#xff08;大概要运行4分钟左右&#xff09; 代码&#xff1a; import pandas as…
阅读更多...
进程 概念和理解 - Linux 是怎么做到 管理进程的？-fork 手动创建进程

进程 概念和理解 - Linux 是怎么做到 管理进程的？-fork 手动创建进程

前言 上一篇博客当中&#xff0c;对 冯诺依曼体系结构 和 操作系统 进行了简要概述&#xff0c;本篇博客将会从上一篇博客的基础之上进行展开&#xff0c;如果你有些不了解的话&#xff0c;建议先看上一篇博客再看本篇博客&#xff1a; 冯诺依曼体结构 - 为什么要有操作系统-…
阅读更多...
golang 工程组件：grpc-gateway 环境安装+默认网关测试

golang 工程组件：grpc-gateway 环境安装+默认网关测试

grpc-gateway grpc-gateway 顾名思义是专门是grpc的网关。也是一个protobuf的编译器&#xff0c;是一个proto的插件。 grpc-gateway就是将http请求处理后转发到对应grpc服务上。很多浏览器&#xff0c;或者客户端开箱不支持grpc&#xff0c;只支持传统的restful API。 grpc网关…
阅读更多...
广播和组播(多播)

广播和组播(多播)

广播 概述 广播&#xff08;broadcast&#xff09;是指封包在计算机网络中传输时&#xff0c;目的地址为网络中所有设备的一种传输方式。实际上&#xff0c;这里所说的“所有设备”也是限定在一个范围之中&#xff0c;称为“广播域”。并非所有的计算机网络都支持广播&#xf…
阅读更多...
【2021集创赛】Arm杯三等奖：基于FPGA的人脸检测SoC设计

【2021集创赛】Arm杯三等奖：基于FPGA的人脸检测SoC设计

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 团队介绍 参赛单位&#xff1a;合肥工业大学 队伍名称&#xff1a;芯创之家 指导老师&#xff1a;邓红辉、尹勇生 参赛杯赛&#xff1a;Arm杯 参赛人员&#xff1a;王亮 李嘉燊 金京 获奖情…
阅读更多...
Prompt-Tuning源码分析

Prompt-Tuning源码分析

Prompt-Tuning源码分析 源码 我们这里的代码解析以huggingface peft源码为主 从模型类结构可以看到&#xff0c;Prompt Tuning 只在输入层加入 prompt virtual tokens&#xff0c;其他地方均没有变化&#xff0c;具体可查看 PromptEmbedding 的源码。 伪代码示例 soft_prom…
阅读更多...
【STM32】RCC时钟模块（使用HAL库）

【STM32】RCC时钟模块（使用HAL库）

https://gitee.com/linhir-linhir/stm32-f103-c8/blob/master/STM32%E6%9C%80%E6%96%B0%E5%9B%BA%E4%BB%B6%E5%BA%93v3.5/Libraries/STM32F10x_StdPeriph_Driver/inc/stm32f10x_rcc.h STM32最新固件库v3.5/Libraries/CMSIS/CM3/DeviceSupport/ST/STM32F10x/system_stm32f10x.c…
阅读更多...
完成比写得好更重要，先完成初稿再说

完成比写得好更重要，先完成初稿再说

我发现自己有个毛病&#xff0c;总想着满意了才动手。于是&#xff0c;经常做到一半跑去看文献&#xff0c;然后陷入文献中觉得这个比自己好&#xff0c;那个比自己好。于是&#xff0c;暂时中断手边工作&#xff0c;最后进度被推迟&#xff0c;甚至啥也没做出来。 今晚再次听…
阅读更多...
Centos使用tomcat部署jenkins

Centos使用tomcat部署jenkins

jenkins的最新版本已经不在支持jdk8&#xff0c;支持的jdk环境如下&#xff1a; 安装jdk环境 yum -y install java-11-openjdk.x86_64 java-11-openjdk-devel.x86_64安装tomcat tomcat官网 cd /optwget https://dlcdn.apache.org/tomcat/tomcat-9/v9.0.82/bin/apache-tomcat…
阅读更多...
【项目管理】如何开展高质量的团队管理

【项目管理】如何开展高质量的团队管理

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
最新文章

Copyright @ 2022~2023