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

前端支持下载模板、导入数据、导出数据(excel格式)

前言

xlsx是由SheetJS开发的一个处理excel文件的npm库,适用于前端开发者实现下载模板、导入导出excel文件等需求,演示的项目的技术栈为vue3 + elementPlus

一. 引入xlsx

  1. 安装xlsx
npm install xlsx
  1. 引入xlsx
import * as XLSX from 'xlsx';

二. 下载模板

const handleDownloadTemplate = () => {let book = XLSX.utils.book_new();// 实例化一个Sheetlet sheet = XLSX.utils.json_to_sheet([{'姓名': '','年龄': ''},],{header: ['姓名','年龄',],},);// 将Sheet写入工作簿XLSX.utils.book_append_sheet(book, sheet, 'Sheet1');// 写入文件,直接触发浏览器的下载XLSX.writeFile(book, 'xxxx模板.xlsx');
}

三. 导出excel

const handleExportData = () => {let data = [{}]const rs =  _.clone(formConfig.value.formData.details)for (let k in rs[0]) {data[0][k] = formConfig.value.tableMapKeyValue[k]}data = data.concat(rs);downloadExl(data, 'xxx表')
}const downloadExl = (json, downName, type) => {  // 导出到excellet keyMap = [] // 获取键for (let k in json[0]) {keyMap.push(k)}let tmpdata = [] // 用来保存转换好的jsonconst jsonTempData = json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {v: v[k],position: (String.fromCharCode(65 + j)) + (i + 1)})))jsonTempData.reduce((prev, next) => prev.concat(next)).forEach(function (v) {tmpdata[v.position] = {v: v.v}})let outputPos = Object.keys(tmpdata)  // 设置区域,比如表格从A1到D10let tmpWB = {SheetNames: ['mySheet'], // 保存的表标题Sheets: {'mySheet': Object.assign({},tmpdata, // 内容{'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域})}}let tmpDown = new Blob([s2ab(XLSX.write(tmpWB,{bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary'} // 这里的数据是用来定义导出的格式类型))], {type: ''})  // 创建二进制对象写入转换好的字节流const elink = document.createElement('a');elink.href = URL.createObjectURL(tmpDown)  // 创建对象超链接elink.download = downName + '.xlsx'  // 下载名称elink.click()  // 模拟点击实现下载setTimeout(function () {  // 延时释放URL.revokeObjectURL(elink.href) // 用URL.revokeObjectURL()来释放这个object URL}, 100)
}// 字符串转字符流
const s2ab = (s) => {const buf = new ArrayBuffer(s.length)const view = new Uint8Array(buf);for (var i = 0; i !== s.length; ++i) {view[i] = s.charCodeAt(i) & 0xFF}return buf
}

相关数据说明

formConfig.value.formData.details: 表格数据,格式[{name: ‘’ ",age: ‘’ "}]
formConfig.value.tableMapKeyValue[k]:

tableMapKeyValue: {name: '姓名',age: '年龄'}

四. 导入excel

导入excel的核心就是解析excel表的数据,转换成我们想要的格式,诸如

[{name: 'jack',age:15}]

这样的格式
导入的组件是用到elementPlus中的el-upload组件

Html

<el-uploadref="uploadRef"accept=".xls, .xlsx":auto-upload="false":limit="1":on-exceed="OnFileExceed":on-change="OnFileChange"style="margin: 0 8px"><el-button type="primary" plain :loading="loading"><el-icon v-if="!loading" class="el-icon--upload"><el-icon-upload-filled /></el-icon>&nbsp;<slot>导入数据</slot></el-button></el-upload>
</template>

js

const OnFileChange = (uploadFile, _) => {// 隐藏文件列表展示uploadRef.value.clearFiles(['success', 'ready', 'uploading', 'fail']);// 上传、解析excel数据ImportExcel(uploadFile.raw);};function ImportExcel(filetemp) {file.value = filetemp;// 通过DOM取文件数据f.value = file.valuevar reader = new FileReader();FileReader.prototype.readAsBinaryString = function(f) {var binary = "";var wb; //读取完成的数据var outdata;var reader = new FileReader();reader.onload = function(e) {var bytes = new Uint8Array(reader.result);var length = bytes.byteLength;for(var i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i]);}wb = XLSX.read(binary, {type: 'binary'});outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西this.da = [...outdata]const arr = this.da.map((v) => {const obj = {};Object.entries(props.formConfig.tableMapKeyValue).forEach(([key, value]) => {obj[key] = v[value];});return obj;});emit('uploadExcelData',arr)return arr}reader.readAsArrayBuffer(f.value);}reader.readAsBinaryString(f);}

其中 emit(‘uploadExcelData’,arr)中的arr就是我们想要得到的数据。

相关文章:

前端支持下载模板、导入数据、导出数据(excel格式)

前言 xlsx是由SheetJS开发的一个处理excel文件的npm库,适用于前端开发者实现下载模板、导入导出excel文件等需求&#xff0c;演示的项目的技术栈为vue3 elementPlus 一. 引入xlsx 安装xlsx npm install xlsx引入xlsx import * as XLSX from xlsx;二. 下载模板 const han…...

编译Faiss-gpu【InterMKL】C++ 按步骤操作 基本不会有问题的 python原理相同。

编译Faiss-gpu C++ 基本介绍 使用Faiss版本【1.7.4】 该项目依赖于BLAS 组件 OpenBLAS 和 IntelMKL BLAS 【官方支持】 IntelMKL 会比 OpenBLAS 快的多。 【来自官方结论】 本机环境 Cuda :11.1 Cuda-Driver: 515 InterMKL: 2021.2.0 Faiss :1.7.4 注意:faiss仅…...

conn.execute的用法详解

conn.execute的用法详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将深入研究数据库连接中conn.execute的用法&#xff0c;解析它的功能、…...

GetBuffer() 与 ReleaseBuffer() 使用详解

GetBuffer() 与 ReleaseBuffer() 使用详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将深入研究在编程中常用的GetBuffer()与ReleaseBuff…...

Flink CEP(基本概念)

Flink CEP 在Flink的学习过程中&#xff0c;我们已经掌握了从基本原理和核心层的DataStream API到底层的处理函数&#xff0c;再到应用层的Table API和SQL的各种手段&#xff0c;可以应对实际应用开发的各种需求。然而&#xff0c;在实际应用中&#xff0c;还有一类更为复…...

[AIGC] Spring Gateway与 nacos 简介

文章目录 Spring Gateway简介主要特性优点总结 Nacos简介主要特性优点总结 Spring Gateway 简介 Spring Gateway是一个基于Spring Framework的工具&#xff0c;用于构建和管理微服务架构中的网关。它提供了一种简单而灵活的方式来路由和过滤请求&#xff0c;以及在微服务之间…...

2024-2-3-复习作业

1> 要求&#xff1a; 效果图&#xff1a; 2> 要求&#xff1a; 效果图&#xff1a; 3> 要求&#xff1a; 效果图&#xff1a; 源代码&#xff1a; #include <stdio.h> #include <stdlib.h> typedef int datatype; typedef struct Node {datatype data…...

【如何快速上手Vue.js框架——详细介绍】

如何快速上手Vue.js框架——详细介绍 1. 介绍2. 理解Vue.js的核心概念3. 搭建开发环境4. 创建第一个项目5. 学习基础6. 进阶概念7. 最佳实践和模式8. 构建和部署9. 持续学习10. 实际操作 1. 介绍 要快速上手Vue.js框架&#xff0c;可以按照以下步骤进行学习和实践&#xff1a;…...

1Panel应用推荐:青龙定时任务管理平台

1Panel&#xff08;github.com/1Panel-dev/1Panel&#xff09;是一款现代化、开源的Linux服务器运维管理面板&#xff0c;它致力于通过开源的方式&#xff0c;帮助用户简化建站与运维管理流程。为了方便广大用户快捷安装部署相关软件应用&#xff0c;1Panel特别开通应用商店&am…...

BUUCTF-Real-[struts2]s2-013

struts2的标签中 <s:a> 和 <s:url> 都有一个 includeParams 属性&#xff0c;可以设置成如下值none - URL中不包含任何参数&#xff08;默认&#xff09; get - 仅包含URL中的GET参数 all - 在URL中包含GET和POST参数 当includeParamsall的时候&#xff0c;会将本次…...

【实战知识】使用Github Action + Nginx实现自动化部署

大家好啊,我是独立开发豆小匠。 先说一下背景~ 我的小程序:豆流便签,目前使用云托管部署后端服务,使用轻量级服务器部署数据库和一些中间件。 因此服务器成本:云托管 + 云服务器 云托管每周花费5元,一个月就是50,一年就是500啊,所以这期准备把云托管优化掉! 1. 需…...

web前端--------渐变和过渡

线性渐变&#xff0c;是指颜色沿一条直线进行渐变&#xff0c;例如从上到下、从左到右。 当然&#xff0c;CSS中也支持使用角度来设置渐变的方向&#xff0c;角度单位为deg。 0deg&#xff0c;为12点钟方向&#xff0c;表示从下到上渐变。 90deg&#xff0c;为3点钟方向&…...

docker镜像结构

# 基础镜像 FROM openjdk:11.0-jre-buster # 设定时区 ENV TZAsia/Shanghai RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone # 拷贝jar包 COPY docker-demo.jar /app.jar # 入口 ENTRYPOINT ["java", "-jar"…...

一个 WPF + MudBlazor 的项目模板(附:多项目模板制作方法)

最近做了几个 WPF MudBlazor 的小东西&#xff0c;每次从头搭建环境比较繁琐&#xff0c;然鹅搭建过程还没啥技术含量&#xff0c;索性就直接做了个模板&#xff0c;方便以后使用。 1. 介绍 一个用来创建 .NET 8 WPF MudBlazor 的项目模板 适用于 VS2022 用法&#xff1a;…...

【数据结构与算法】之排序系列-20240203

这里写目录标题 一、628. 三个数的最大乘积二、645. 错误的集合三、747. 至少是其他数字两倍的最大数四、905. 按奇偶排序数组五、922. 按奇偶排序数组 II六、976. 三角形的最大周长 一、628. 三个数的最大乘积 简单 给你一个整型数组 nums &#xff0c;在数组中找出由三个数组…...

C++之std::tuple(一) : 使用

相关系列文章 C之std::tuple(一) : 使用 C三剑客之std::variant(一) : 使用 C三剑客之std::variant(二)&#xff1a;深入剖析 目录 1.简介 2.创建元组 2.1.直接初始化方式 2.2.使用花括号初始化列表方式&#xff08;C11及以上版本&#xff09; 2.3.make_tuple方式 2.4.使…...

蓝桥杯嵌入式第六届真题(完成)STM32G431

蓝桥杯嵌入式第六届真题&#xff08;完成&#xff09;STM32G431 题目部分 相关文件 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program b…...

【日志记录】——主MCU 通过私有协议更新从MCU程序固件

一&#xff1a;需求分析 在一些系统较为复杂的嵌入式设备中&#xff0c;往往不止一片MCU或者处理模块&#xff0c;通常为一片主MCU负责应用逻辑处理和对外网络通信&#xff0c;其他从MCU负责实时采集处理高频数据&#xff0c;在设备运营过程中&#xff0c;往往伴随新需求或者bu…...

【0253】深入分析Query Execution(一)

下一篇:【0254】深入分析Query Execution(二) 1. 查询执行阶段(Query Execution Stages) 1.1 简单查询协议(Simple Query Protocol) 客户端-服务器协议的一个简单版本支持SQL查询执行:它将查询的文本发送到服务器,并在响应中获得完整的执行结果,而不管它包含多少行…...

编译opencv4.6问题汇总,第三方软件包见我发的资源

win10系统 python3.8.2&#xff0c;cmake-3.15.5-win64-x64&#xff0c;opencv4.6 编译方式见&#xff1a;OpenCV的编译 - 知乎 本文主要总结问题。赠人玫瑰手留余香。 问题1 Problem with installing OpenCV using Visual Studio and CMake (error code: MSB3073) 解决方法…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考

目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候&#xff0c;显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...

Qwen系列之Qwen3解读:最强开源模型的细节拆解

文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望 如果…...

el-amap-bezier-curve运用及线弧度设置

文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 ‌el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件,用于在 高德地图 上绘制贝塞尔曲线。‌ 基本用法属性path定义曲线的路径,可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...

【字节拥抱开源】字节团队开源视频模型 ContentV: 有限算力下的视频生成模型高效训练

本项目提出了ContentV框架&#xff0c;通过三项关键创新高效加速基于DiT的视频生成模型训练&#xff1a; 极简架构设计&#xff0c;最大化复用预训练图像生成模型进行视频合成系统化的多阶段训练策略&#xff0c;利用流匹配技术提升效率经济高效的人类反馈强化学习框架&#x…...

开源 vGPU 方案:HAMi,实现细粒度 GPU 切分

本文主要分享一个开源的 GPU 虚拟化方案&#xff1a;HAMi&#xff0c;包括如何安装、配置以及使用。 相比于上一篇分享的 TimeSlicing 方案&#xff0c;HAMi 除了 GPU 共享之外还可以实现 GPU core、memory 得限制&#xff0c;保证共享同一 GPU 的各个 Pod 都能拿到足够的资源。…...

MySQL 数据库深度剖析:事务、SQL 优化、索引与 Buffer Pool

在当今数据驱动的时代&#xff0c;数据库作为数据存储与管理的核心&#xff0c;其性能与可靠性至关重要。MySQL 作为一款广泛使用的开源数据库&#xff0c;在众多应用场景中发挥着关键作用。在这篇博客中&#xff0c;我将围绕 MySQL 数据库的核心知识展开&#xff0c;涵盖事务及…...

CMake系统学习笔记

CMake系统学习笔记 基础操作 最基本的案例 // code #include <iostream>int main() {std::cout << "hello world " << std::endl;return 0; }// CMakeLists.txt cmake_minimum_required(VERSION 3.0)# 定义当前工程名称 project(demo)add_execu…...

C#学习12——预处理

一、预处理指令&#xff1a; 解释&#xff1a;是在编译前由预处理器执行的命令&#xff0c;用于控制编译过程。这些命令以 # 开头&#xff0c;每行只能有一个预处理指令&#xff0c;且不能包含在方法或类中。 个人理解&#xff1a;就是游戏里面的备战阶段&#xff08;不同对局…...