利用ExcelJS封装一个excel表格的导出

ExcelJS 操作和写入Excel 文件。
直接上代码,js部分:
exportFn.js

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

export function exportExcleUtils(tHeader, filterVal, listData, fileName) {
  //设置工作簿属性
  const workbook = new ExcelJS.Workbook();
  workbook.creator = 'Me';
  workbook.lastModifiedBy = 'Her';
  workbook.created = new Date();
  workbook.modified = new Date();
  workbook.lastPrinted = new Date();
  //添加工作薄
  const worksheet = workbook.addWorksheet('sheet1');
  //计算标题宽
  let colWidth = calculateColumnWidth(tHeader);
  console.log(colWidth);
  let style = { alignment: { vertical: 'middle', horizontal: 'center' } };
  let columns = [];
  for (let i = 0; i < tHeader.length; i++) {
    let header = {
      header: tHeader[i],
      key: filterVal[i] ? filterVal[i] : i + '',
      width: colWidth[i] ? colWidth[i] + 20 : 10,
      style: JSON.parse(JSON.stringify(style)),
    };
    columns.push(header);
  }
  worksheet.columns = columns;

  //添加数据
  listData.forEach((item) => {
    worksheet.addRow(item);
  });

  worksheet.getRow(1).font = { name: '宋体', family: 4, size: 16, bold: true };

  fileName = fileName + '.xlsx';
  workbook.xlsx.writeBuffer().then((data) => {
    let blob = new Blob([data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    });
    saveAs(blob, fileName);
  });
}

export function calculateColumnWidth(tHeader) {
  let colWidth = [];
  //计算列宽
  for (let i = 0; i < tHeader.length; i++) {
    if (colWidth[i] && colWidth[i] < tHeader[i].length) {
      colWidth[i] = tHeader[i].length * 2;
    } else if (colWidth[i] === undefined) {
      colWidth[i] = tHeader[i].length * 2;
    }
  }
  return colWidth;
}

举个栗子:

//从公共函数中拿出
import { exportExcleUtils } from '@/libs/exportFn';
...
...
...
//再写个按钮
    <el-button type="primary" @click="exportFn">导出按钮</el-button>
...
...
...

    //导出
    exportFn() {
      let loadingInstance = Loading.service({
        text: '正在导出,请稍等...',
      });

      let table = this.selectedRowArr;
		//表头
      let tHeader = [
		     'a',
		     'b',
		     'c',
		     'd',
      ];
		//数据的里字段
      let filterVal = [
	        'person',
	    	'dog',
	    	'cat',
	    	'pig',
      ];
      let fileName = '导出的表文件名';
      loadingInstance.close();
      exportExcleUtils(tHeader, filterVal, table, fileName);
    },

PS:上文的selectedRowArr变量是我项目里的,自己去塞数据,数组对象形式

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

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

相关文章

关于武汉芯景科技有限公司的马达驱动芯片AT6237开发指南(兼容DRV8837)

一、芯片引脚介绍 1.芯片引脚 二、系统结构图 三、功能描述 逻辑功能

Android View

前面我们了解了Android四大组件的工作流程&#xff0c;Android中还存在一个和四大组件地位相同的概念&#xff1a;View&#xff0c;用于向用户页面展示内容。我们经常使用的TextView、Button、ImageView控件等都继承于它&#xff0c;也会自定义View实现自定义效果。View类源码内…

谷歌插件开发学习指南

什么是谷歌插件 谷歌插件&#xff08;Chrome Extension&#xff09;是为谷歌浏览器&#xff08;Chrome&#xff09;开发的小程序&#xff0c;旨在增强浏览器的功能或用户体验。它们可以通过添加工具栏按钮、修改网页内容、集成其他服务等方式&#xff0c;实现各种功能&#xf…

linux命令行的艺术

文章目录 前言基础日常使用文件及数据处理系统调试单行脚本冷门但有用仅限 OS X 系统仅限 Windows 系统在 Windows 下获取 Unix 工具实用 Windows 命令行工具Cygwin 技巧 更多资源免责声明 熟练使用命令行是一种常常被忽视&#xff0c;或被认为难以掌握的技能&#xff0c;但实际…

Puppeteer 与浏览器版本兼容性:自动化测试的最佳实践

Puppeteer 支持的浏览器版本映射&#xff1a;从 v20.0.0 到 v23.6.0 自 Puppeteer v20.0.0 起&#xff0c;这个强大的自动化库开始支持与 Chrome 浏览器的无头模式和有头模式共享相同代码路径&#xff0c;为自动化测试带来了更多便利。从 v23.0.0 开始&#xff0c;Puppeteer 进…

知识管理新选择!本地大模型助手“知我AI”全功能解析

抖知书老师推荐&#xff1a; 随着人工智能技术的飞速发展&#xff0c;本地大模型知识管理工具逐渐成为提高工作效率的利器。今天&#xff0c;我要向大家介绍一款名为**“知我AI”**的本地知识管理助手&#xff0c;它以其独特的功能和优势&#xff0c;正在成为众多专业人士的新…

Banana Pi BPI-R3路由器开发板运行 OrayOS物联网系统

近日&#xff0c;Banana PI开发板宣布与贝锐达成战略合作&#xff0c;贝锐OrayOS现已成功适配Banana PI的BPI-R3型号&#xff0c;并计划进一步扩展硬件支持&#xff0c;包括目前Banana PI热销的BPI-R4、BPI-R3 Mini等更多型号。这一合作为用户提供了更广泛的开发板选择&#xf…

No.24 笔记 | WEB安全 - 任意文件包含漏洞 part 6

在 Web 安全领域中&#xff0c;任意文件包含漏洞是一种较为常见且具有潜在危险性的漏洞类型。本文将详细介绍任意文件包含漏洞的概念、原理、分类、利用方法以及防护措施&#xff0c;帮助新手小白更好地理解和防范这一漏洞。&#x1f603; 一、概念 包含的定义 开发人员为了提…

森利威尔SL2516D 耐压60V内置5V功率MOS 支持PWM LED恒流驱动器芯片

一、基本特性 型号&#xff1a;SL2516D封装&#xff1a;ESOP8工作频率&#xff1a;140kHz驱动MOS管&#xff1a;内置 二、电气特性 输入电压范围&#xff1a;8V~100V&#xff08;注意&#xff0c;虽然问题中提到耐压60V&#xff0c;但根据官方信息&#xff0c;其实际耐压范围…

Vscode配置CC++编程环境的使用体验优化和补充说明

文章目录 快速编译运行&#x1f47a;code runner插件方案Code Runner Configuration 直接配置 相关指令和快捷键默认task配置和取消默认 配置文件补充介绍(可选 推荐阅读)&#x1f60a;使用vscode预置变量和环境变量环境变量的使用使用环境变量的好处环境变量可能引起的问题 检…

Linux中rpm包和yum仓库介绍及入门配置

rpm包概述 RPM Package Manager,RPM包管理器 由红帽公司提出&#xff0c;适用于Rocky Linux、Redhat、SUSE等系列操作系统 建立集中数据库&#xff0c;记录软件包安装/卸载等变化信息&#xff0c;分析软件包依赖关系 RPM包 文件名特征 软件名-版本信息.操作系统.硬件架/构.r…

L 波段射频信号采集回放系统

L 波段采集回放系统是一套便携式模拟数字采集系统&#xff0c;该系统主要由射频输入模块、中频接收回放模块、FPGA 信号处理单元、服务器系统和存储单元等组成。 L 波段采集回放系统的功能主要用于对 950MHz〜2150MHz 模拟量射频信号的采集、存储记录与回放&#xff1b;采集与…

百度如何打造AI原生研发新范式?

&#x1f449;点击即可下载《百度AI原生研发新范式实践》资料 2024年10月23-25日&#xff0c;2024 NJSD技术盛典暨第十届NJSD软件开发者大会、第八届IAS互联网架构大会在南京召开。本届大会邀请了工业界和学术界的专家&#xff0c;优秀的工程师和产品经理&#xff0c;以及其它行…

Unity3D 开发教程:从入门到精通

Unity3D 开发教程&#xff1a;从入门到精通 Unity3D 是一款强大的跨平台游戏引擎&#xff0c;广泛应用于游戏开发、虚拟现实、增强现实等领域。本文将详细介绍 Unity3D 的基本概念、开发流程以及一些高级技巧&#xff0c;帮助你从零基础到掌握 Unity3D 开发。 目录 Unity3D…

Vue3和Springboot前后端简单部署

一、Vue3Springboot 的前后端简单部署 (在win下面部署) 1、前端实现部署 思想: 前端打包项目后、放到nginx中进行部署 1、nginx 安装 和 解压 1、下载 nginx.zip win版本 解压就可以 2、解压后、启动程序 3、访问 nginx 欢迎页面 http://localhost/ 80 端口 可以省略 直接访…

中仕公考:2025四川省考今日报名!

2025年四川省考今日开始报名啦&#xff01;准备参加考试的广大考生们不要错过报名时间哦&#xff01; 报名时间&#xff1a; 2024年11月1日至7日上午8:00 资格审查&#xff1a; 2024年11月1日至8日上午8:00 确认缴费&#xff1a; 2024年11月9日上午8:00 准考证打印&#xff…

css 同时实现渐变色和文字阴影(Vue 3 + TypeScript)

UI效果 渐变效果 直接添加text-shadow属性&#xff0c;发现阴影覆盖在了字体之上 解决&#xff1a; 利用::after伪类&#xff0c;将字体的阴影加在伪类之上。 <template><div class"app"><h1 ref"h1Ref">{{ title }}</h1></d…

从美颜SDK到实时视频美颜平台:开发美颜系统的技术解析

今天&#xff0c;笔者将围绕美颜SDK的基本功能、实时视频美颜平台的架构设计&#xff0c;以及实现美颜系统的关键技术进行深入解析。 一、美颜SDK的基础功能 美颜SDK&#xff08;Software Development Kit&#xff09;是实现美颜效果的核心工具包&#xff0c;它通常包含一系列…

【Linux】用户权限管理:创建受限用户并配置特定目录访问权限

本文详细介绍了如何在 Linux 系统中创建一个名为 agent 的新用户&#xff0c;并限制其在特定目录下的权限。通过使用 useradd 命令创建用户&#xff0c;并使用 usermod 命令将新用户添加到现有用户组中&#xff0c;确保其具有适当的权限。接着&#xff0c;通过 chown 和 chmod …

获英伟达二次投资!AI制药公司Terray完成1.2亿美元融资,构建全球最大化学数据集

近日&#xff0c;AI 制药公司 Terray Therapeutics 宣布完成 1.2 亿美元 B 轮融资&#xff0c;本轮融资将用于推进其内部免疫学项目的临床试验&#xff0c;并进一步完善公司的生成式 AI 平台 tNova。 据悉&#xff0c;本次 Terray 的融资由英伟达风险投资部门 NVentures 和新投…