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

vue3 + antd vue 纯前端 基于xlsx 实现导入excel 转 json，将json数据转换XLSX并下载（下载模版）

news 来源：原创 2024/9/20 15:40:12

一、导入

0、关键代码

// 安装插件
npm i xlsx/yarn add xlsx
// 导入xlsx
import * as XLSX from 'xlsx';

点击提交的时候才整理数据。上传的时候文件保存在  state.form.file[0] 中的

// 定义字段映射关系
const fieldMap = {sheet2json: {技能名称: 'skill_name',技能等级: 'skill_level',技能描述: 'skill_desc',技能类型: 'skill_type',技能效果: 'skill_effect',技能消耗: 'skill_cost',技能持续时间: 'skill_duration',技能范围: 'skill_range',技能范围: 'skill_range',技能目标: 'skill_target'}
};// 提交 --- 点击提交的时候才整理数据。上传的时候文件保存的  state.form.file[0] 中的
const handleSummit = () => {formRef.value.validate().then(async () => {try {const data = await state.form.file[0].arrayBuffer(); // 使用 arrayBuffer 避免中文乱码const workbook = XLSX.read(data, { type: 'buffer' });const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);// 映射字段名并过滤掉不符合预期的数据const mappedData = outdata.map(row => {return Object.keys(row).reduce((targetMap, key) => {const mappedKey = fieldMap.sheet2json[key];if (mappedKey) {targetMap[mappedKey] = row[key];}return targetMap;}, {});}).filter(item => Object.keys(item).length > 0); // 过滤空对象console.log('------- 导入的数据 -------', mappedData);emits('submit', mappedData);handleClose();} catch (error) {}});
};

1、template

<a-form :model="state.form" name="form" ref="formRef" :label-col="{ style: { width: '120px' } }" autocomplete="off" :rules="rules"><a-form-item label="导入文件上传" name="file" :rules="rules.file"><div class="file-warp" style="position: relative"><a-uploadstyle="margin-left: 20px":file-list="state.form.file"name="file":customRequest="upload":beforeUpload="beforeUpload"@remove="handleRemove"accept=".xlsx, .xls"><a-button type="primary"><upload-outlined></upload-outlined>上传文件</a-button></a-upload><a-button type="primary" ghost style="position: absolute; top: 0; left: 150px" @click="handleDownload"><VerticalAlignBottomOutlined></VerticalAlignBottomOutlined>模版下载</a-button></div></a-form-item>
</a-form>

2、script

import * as XLSX from 'xlsx';
import { reactive, ref } from 'vue';const state = reactive({form: {file: []}
});
const formRef = ref(null);
const open = ref(true);const rules = {file: [{ required: true, message: '请选择文件', trigger: ['blur', 'change'] }]
};// 定义字段映射关系
const fieldMap = {sheet2json: {技能名称: 'skill_name',技能等级: 'skill_level',技能描述: 'skill_desc',技能类型: 'skill_type',技能效果: 'skill_effect',技能消耗: 'skill_cost',技能持续时间: 'skill_duration',技能范围: 'skill_range',技能范围: 'skill_range',技能目标: 'skill_target'},json2sheet: {skill_name: '技能名称',skill_level: '技能等级',skill_desc: '技能描述',skill_type: '技能类型',skill_effect: '技能效果',skill_cost: '技能消耗',skill_duration: '技能持续时间',skill_range: '技能范围',skill_target: '技能目标'}
};// 上传文件之前检测
const beforeUpload = file => {const isXlsxOrXls = file.name.split('.')[1] == 'xlsx' || file.name.split('.')[1] == 'xls';if (!isXlsxOrXls) {message.error('只允许上传xlsx, xls格式的文件！');return false;}const isLt10M = file.size / 1024 / 1024 < 10;if (!isLt10M) {message.error('文件不得大于10MB!');return false;}return isXlsxOrXls && isLt10M;
};// 选择文件
const upload = file => {// 原本调用接口上传的// uplaodFile(file.file).then(res => {//   fileList.value.push({ name: res.data.originalFilename, url: viteConfig.baseUrl + res.data.fileName, fileUrl: res.data.fileName });//   formRef.value.clearValidate();// });state.form.file = [file.file];formRef.value.clearValidate();
};// 移除文件
const handleRemove = file => {state.form.file = [];
};// 提交 转换数据
const handleSummit = () => {formRef.value.validate().then(async () => {try {const data = await state.form.file[0].arrayBuffer(); // 使用 arrayBuffer 避免中文乱码const workbook = XLSX.read(data, { type: 'buffer' });const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);// 映射字段名并过滤掉不符合预期的数据const mappedData = outdata.map(row => {return Object.keys(row).reduce((targetMap, key) => {const mappedKey = fieldMap.sheet2json[key];if (mappedKey) {targetMap[mappedKey] = row[key];}return targetMap;}, {});}).filter(item => Object.keys(item).length > 0); // 过滤空对象console.log('------- 导入的数据 -------', mappedData);emits('submit', mappedData);handleClose();} catch (error) {}});
};

二、模板下载

1、script

// 定义字段映射关系
const fieldMap = {json2sheet: {skill_name: '技能名称',skill_level: '技能等级',skill_desc: '技能描述',skill_type: '技能类型',skill_effect: '技能效果',skill_cost: '技能消耗',skill_duration: '技能持续时间',skill_range: '技能范围',skill_target: '技能目标'}
};// 模板数据
let templateData = [{skill_name: '大刀斩',skill_level: '5',skill_desc: '技能描述',skill_type: '大招',skill_effect: '亚瑟王那样的大招',skill_cost: '10000',skill_duration: '10',skill_range: '500',skill_target: '目标：亚瑟王'}
];// 模版下载
const handleDownload = () => {// 映射字段名并过滤掉不符合预期的数据const list = templateData.map(row => {return Object.keys(row).reduce((targetMap, key) => {const mappedKey = fieldMap.json2sheet[key];if (mappedKey) {targetMap[mappedKey] = row[key];}return targetMap;}, {});}).filter(item => Object.keys(item).length > 0); // 过滤空对象;const workSheet = XLSX.utils.json_to_sheet(list);const workBook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workBook, workSheet, '技能表');// 生成Excel文件并下载XLSX.writeFile(workBook, '技能表模板.xlsx');
};

三、完整的文件

<!--* @Description: ------------ fileDescription -----------* @Author: snows_l snows_l@163.com* @Date: 2024-07-18 14:46:47* @LastEditors: snows_l snows_l@163.com* @LastEditTime: 2024-07-19 15:51:19* @FilePath: /digital-qiankun-you/cmdb/src/pages/ipSource/components/uploadFile.vue
-->
<template><div class="upeate-field-warp"><a-modal width="800px" v-model:open="open" :z-index="10004" centered :title="'规划导入'"><template #footer><a-button type="primary" @click="handleSummit">确认</a-button></template><div class="update-field-content-warp"><a-form :model="state.form" name="form" ref="formRef" :label-col="{ style: { width: '120px' } }" autocomplete="off" :rules="rules"><a-form-item label="导入文件上传" name="file" :rules="rules.file"><div class="file-warp" style="position: relative"><a-uploadstyle="margin-left: 20px":file-list="state.form.file"name="file":customRequest="upload":beforeUpload="beforeUpload"@remove="handleRemove"accept=".xlsx, .xls"><a-button type="primary"><upload-outlined></upload-outlined>上传文件</a-button></a-upload><a-button type="primary" ghost style="position: absolute; top: 0; left: 150px" @click="handleDownload"><VerticalAlignBottomOutlined></VerticalAlignBottomOutlined>模版下载</a-button></div></a-form-item></a-form></div></a-modal></div>
</template><script setup>
import { UploadOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons-vue';
import { reactive, ref } from 'vue';
import * as XLSX from 'xlsx';const emits = defineEmits(['submit']);const state = reactive({form: {file: []}
});
const formRef = ref(null);
const open = ref(true);const rules = {file: [{ required: true, message: '请选择文件', trigger: ['blur', 'change'] }]
};// 上传文件之前检测
const beforeUpload = file => {const isXlsxOrXls = file.name.split('.')[1] == 'xlsx' || file.name.split('.')[1] == 'xls';if (!isXlsxOrXls) {message.error('只允许上传xlsx, xls格式的文件！');return false;}const isLt10M = file.size / 1024 / 1024 < 10;if (!isLt10M) {message.error('文件不得大于10MB!');return false;}return isXlsxOrXls && isLt10M;
};// 选择文件
const upload = file => {// 原本调用接口上传的// uplaodFile(file.file).then(res => {//   fileList.value.push({ name: res.data.originalFilename, url: viteConfig.baseUrl + res.data.fileName, fileUrl: res.data.fileName });//   formRef.value.clearValidate();// });state.form.file = [file.file];formRef.value.clearValidate();
};// 移除文件
const handleRemove = file => {state.form.file = [];
};// 初始化
const init = () => {open.value = true;
};// 关闭
const handleClose = () => {open.value = false;
};// 定义字段映射关系
const fieldMap = {sheet2json: {技能名称: 'skill_name',技能等级: 'skill_level',技能描述: 'skill_desc',技能类型: 'skill_type',技能效果: 'skill_effect',技能消耗: 'skill_cost',技能持续时间: 'skill_duration',技能范围: 'skill_range',技能范围: 'skill_range',技能目标: 'skill_target'},json2sheet: {skill_name: '技能名称',skill_level: '技能等级',skill_desc: '技能描述',skill_type: '技能类型',skill_effect: '技能效果',skill_cost: '技能消耗',skill_duration: '技能持续时间',skill_range: '技能范围',skill_target: '技能目标'}
};// 模板数据
let templateData = [{skill_name: '大刀斩',skill_level: '5',skill_desc: '技能描述',skill_type: '大招',skill_effect: '亚瑟王那样的大招',skill_cost: '10000',skill_duration: '10',skill_range: '500',skill_target: '目标：亚瑟王'}
];// 提交
const handleSummit = () => {formRef.value.validate().then(async () => {try {const data = await state.form.file[0].arrayBuffer(); // 使用 arrayBuffer 避免中文乱码const workbook = XLSX.read(data, { type: 'buffer' });const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);// 映射字段名并过滤掉不符合预期的数据const mappedData = outdata.map(row => {return Object.keys(row).reduce((targetMap, key) => {const mappedKey = fieldMap.sheet2json[key];if (mappedKey) {targetMap[mappedKey] = row[key];}return targetMap;}, {});}).filter(item => Object.keys(item).length > 0); // 过滤空对象console.log('------- 导入的数据 -------', mappedData);emits('submit', mappedData);handleClose();} catch (error) {}});
};// 模版下载
const handleDownload = () => {// 映射字段名并过滤掉不符合预期的数据const list = templateData.map(row => {return Object.keys(row).reduce((targetMap, key) => {const mappedKey = fieldMap.json2sheet[key];if (mappedKey) {targetMap[mappedKey] = row[key];}return targetMap;}, {});}).filter(item => Object.keys(item).length > 0); // 过滤空对象;const workSheet = XLSX.utils.json_to_sheet(list);const workBook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workBook, workSheet, '技能表');// 生成Excel文件并下载XLSX.writeFile(workBook, '技能表模板.xlsx');
};defineExpose({init
});
</script><style lang="less" scoped>
.upeate-field-warp {width: 100%;
}
</style><style lang="less">
.update-field-content-warp {padding: 40px 20px;.field-item {display: flex;align-items: center;label {min-width: 80px;}}
}
</style>

四、效果图：

原数据（图1）

导入组件（图2）

导出整理后的数据（图3）

模板下载（图4）

模板下载之后的文件（图5）

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 如何在空间计算领域赚钱
  • PgSQL报错“绑定消息提供了1个参数,但是已准备好语句““ 要求0个参数“
  • 【Linux服务器Java环境搭建】013 springboot + vue 前后端分离项目详细介绍（理论）
  • 服务器注意事项
  • Typora 【最新1.8.6】版本安装下载教程 (轻量级 Markdown 编辑器)，图文步骤详解，免费领取（软件可激活使用）
  • 【LeetCode】翻转二叉树
  • Redis-布隆过滤器（Bloom Filter）详解
  • 【BUG】已解决：Uncaught SyntaxError: Unexpected token ‘＜‘
  • 如何获得Cesium的TileSet并设置本地服务器的Url
  • IO半虚拟化-vhost学习笔记
  • U-Net: 一种用于图像分割的深度学习架构
  • MyPostMan 迭代文档管理、自动化接口闭环测试工具（自动化测试篇）
  • go 实现websocket以及详细设计流程过程，确保通俗易懂
  • 谷粒商城实战笔记-37-前端基础-Vue-基本语法插件安装
  • 【阿里OSS文件上传】SpringBoot实现阿里OSS对象上传
  • 9月CHINA-PUB-OPENDAY技术沙龙——IPHONE
  • 【面试系列】之二：关于js原型
  • Essential Studio for ASP.NET Web Forms 2017 v2，新增自定义树形网格工具栏
  • Hexo+码云+git快速搭建免费的静态Blog
  • HTTP--网络协议分层，http历史(二)
  • idea + plantuml 画流程图
  • JavaScript 基础知识 - 入门篇(一)
  • JavaScript学习总结——原型
  • js算法-归并排序（merge_sort）
  • leetcode98. Validate Binary Search Tree
  • Otto开发初探——微服务依赖管理新利器
  • PAT A1120
  • Redis字符串类型内部编码剖析
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • use Google search engine
  • 工程优化暨babel升级小记
  • 开发了一款写作软件(OSX,Windows)，附带Electron开发指南
  • 前端技术周刊 2019-02-11 Serverless
  • 掌握面试——弹出框的实现（一道题中包含布局/js设计模式）
  • Mac 上flink的安装与启动
  • 组复制官方翻译九、Group Replication Technical Details
  • ​ ​Redis（五）主从复制：主从模式介绍、配置、拓扑（一主一从结构、一主多从结构、树形主从结构）、原理（复制过程、​​​​​​​数据同步psync）、总结
  • ​Linux·i2c驱动架构​
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • # Kafka_深入探秘者（2）：kafka 生产者
  • （2）(2.10) LTM telemetry
  • (2022 CVPR) Unbiased Teacher v2
  • （6）STL算法之转换
  • （9）目标检测_SSD的原理
  • （BFS）hdoj2377-Bus Pass
  • （day 12）JavaScript学习笔记（数组3）
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • （TOJ2804）Even? Odd?
  • （补充）：java各种进制、原码、反码、补码和文本、图像、音频在计算机中的存储方式
  • （代码示例）使用setTimeout来延迟加载JS脚本文件
  • （附源码）springboot青少年公共卫生教育平台 毕业设计 643214
  • (九)One-Wire总线-DS18B20
  • （面试必看！）锁策略
  • （顺序）容器的好伴侣 --- 容器适配器
  • (算法)区间调度问题