Vue获取上传Excel文件内容并展示在表格中

一、安装依赖

npm install xlsx

二、引用依赖

import XLSX from 'xlsx'

三、代码实现

1、注意:函数 analysis 中reader.readAsBinaryString(file),file的数据格式如图所示

2、示例代码 

<!-- 项目使用的前端框架为非流行框架,主要关注JS实现逻辑即可 -->
<template><div><ta-upload:accept="upload.accept":fileList="upload.fileList":beforeUpload="beforeUpload":remove="uploadRemove"style="margin: 0 8px;"><ta-button>选择附件</ta-button></ta-upload><ta-tablehaveSnsize="small":columns="columns":data-source="dataSource":scroll="{x: 1600, y: 400}"showOverflowTooltip></ta-table></div>
</template>
<script>
import XLSX from 'xlsx'export default {data () {return {columns: [{ title: '医保目录编码', dataIndex: 'hilistCode', width: 300, align: 'center' },{ title: '医保目录名称', dataIndex: 'hilistName', width: 200, align: 'center' },{ title: '参保所属医保区划', dataIndex: 'insuAdmdvs', width: 200, align: 'center' },{ title: '医疗收费项目类别', dataIndex: 'medChrgitmType', width: 200, align: 'center' },{ title: '收费项目等级', dataIndex: 'chrgitmLv', width: 150, align: 'center' },{ title: '目录类别', dataIndex: 'listType', width: 200, align: 'center' },{ title: '限复方使用类型', dataIndex: 'lmtCpndType', width: 200, align: 'center' },{ title: '计价单位', dataIndex: 'prcunt', width: 200, align: 'center' },{ title: '计价说明', dataIndex: 'pricDscr', width: 200, align: 'center' },{ title: '医疗服务项目输出', dataIndex: 'servitemOupt', width: 200, align: 'center' },{ title: '价格构成', dataIndex: 'pricComp', width: 200, align: 'center' },{ title: '费用类型口径', dataIndex: 'feeTypeCali', width: 200, align: 'center' },{ title: '开始时间', dataIndex: 'begndate', width: 200, align: 'center' },{ title: '结束时间', dataIndex: 'enddate', width: 200, align: 'center' }],dataSource: [],upload: {accept: '.xls,.xlsx',fileList: []}}},computed: {uploadTypeErrorMessage () {return `只能上传 ${this.upload.accept.split(',')} 格式的文件`;}},methods: {beforeUpload (file) {if(!['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].includes(file.type)) {this.$message.error(this.uploadTypeErrorMessage);return false;}this.upload.fileList.length>0?this.upload.fileList.splice(0, 1, file):this.upload.fileList.push(file);this.analysis(file).then(res => { if (res && res.length > 0){let list = [];res[0].sheet.forEach(d => {let data = {};Object.keys(d).filter(k => k!=='序号').forEach(k => { //过滤掉根本不需要的列,根据自己情况写let column = this.columns.find(li => li.title===k);if(column) {data[column.dataIndex] = d[k];}});if(Object.keys(data).length>0) {list.push(data);}});this.dataSource = list;}});return false;},analysis (file){return new Promise(function (resolve) {const reader = new FileReader()reader.onload = function (e){const json = XLSX.read(e.target.result, {type: 'binary'});resolve(json.SheetNames.map(sheetName => {return {sheetName: sheetName,sheet: XLSX.utils.sheet_to_json(json.Sheets[sheetName])};}));};reader.readAsBinaryString(file);});},uploadRemove (file) {let index = this.upload.fileList.findIndex(li =>li.uid===file.uid);if(index> -1) {this.upload.fileList.splice(index, 1);this.dataSource = [];}}},mounted () {this.dataSource = [];this.upload.fileList = [];}
}
</script>

四、参考文章

前端使用xlsx插件读取excel文件数据 - yingzi__block - 博客园

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

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

相关文章

pipelineJob和pipeline的关系

pipelineJob与pipeline在Jenkins体系中构成配置层与执行层的协同关系,具体关联如下: 一、核心功能定位 概念作用实现层级pipelineJob定义Job的元数据(如SCM配置、日志策略)配置层pipeline描述实际构建流程(如阶段划分、并行任务)执行层scriptPath桥梁作用:将配置层定义…

第二十篇 Word文档自动化:Python批量生成、模板填充与内容修改,告别繁琐排版!

python实现word 自动化重复性文档制作&#xff0c;手动填充模板&#xff0c;效率低下还易错1.python-docx入门&#xff1a;Word文档的“瑞士军刀”&#xff01;1.1 安装与基础概念&#xff1a;文档、段落、运行、表格1.2 打开/创建Word文档&#xff1a;Python与Word的初次接触1…

【C# in .NET】7. 探秘结构体:值类型的典型代表

探秘结构体&#xff1a;值类型的典型代表 在 C# 的类型系统中&#xff0c;结构体&#xff08;Struct&#xff09;作为值类型的典型代表&#xff0c;一直扮演着既基础又微妙的角色。许多开发者在日常编码中虽频繁使用结构体&#xff08;如int、DateTime等&#xff09;&#xff0…

深入探讨Hadoop YARN Federation:架构设计与实践应用

Hadoop YARN Federation简介基本概念与设计初衷Hadoop YARN Federation作为Apache Hadoop 3.x版本的核心特性之一&#xff0c;其本质是通过多集群联合管理机制突破单点资源管理器的性能瓶颈。传统YARN架构中&#xff0c;单个ResourceManager&#xff08;RM&#xff09;需要管理…

STM32固件升级设计——SD卡升级固件

目录 概述 一、功能描述 1、BootLoader部分&#xff1a; 2、APP部分&#xff1a; 二、BootLoader程序制作 1、分区定义 2、 主函数 3、SD卡升级文件检测和更新 4、程序跳转 三、APP程序制作 四、工程配置&#xff08;默认KEIL5&#xff09; 五、运行测试 结束语…

基于Python的图像文字识别系统

主要语言&#xff1a;Python数据库&#xff1a;SQLiteUI界面&#xff1a;PYQT5文字识别模型&#xff1a;Tesseract OCR&#xff08;本地搭建&#xff09;主要功能&#xff1a;登录注册&#xff1a;登录注册功能。图片管理&#xff1a;单张/多张上传、图片列表、预览、删除、切换…

028_分布式部署架构

028_分布式部署架构 概述 本文档介绍如何设计和实现Claude应用的分布式部署架构&#xff0c;包括负载均衡、缓存策略、服务发现、容错机制等。 微服务架构设计 1. 服务拆分策略 from abc import ABC, abstractmethod from typing import Dict, Any, Optional import asyncio im…

duckdb和pyarrow读写arrow格式的方法

arrow格式被多种分析型数据引擎广泛采用&#xff0c;如datafusion、polars。duckdb有一个arrow插件&#xff0c;原来是core插件&#xff0c;1.3版后被废弃&#xff0c;改为社区级插件&#xff0c;名字改为nanoarrow, 别名还叫arrow。 安装 D install arrow from community; D…

机器人位姿变换的坐标系相对性:左乘法则与右乘法则解析​

文章目录1. 全局坐标系下机器人位姿更新的左乘法则​2. 局部坐标系下机器人位姿增量更新的右乘法则​3. 相对位姿的计算3.1. 基于世界坐标系&#xff08;全局变换&#xff09;3.2. 基于 t1t_1t1​ 时刻相机的局部坐标系&#xff08;局部变换&#xff09;3.3. 两者区别设机器人当…

代码随想录算法训练营65期第20天

代码随想录算法训练营65期第20天 本文中使用到一些代码随想录里面的图片或者链接&#xff0c;在这里致敬程序员Carl 二叉搜索树的最近公共祖先 相对于 二叉树的最近公共祖先 本题就简单一些了&#xff0c;因为 可以利用二叉搜索树的特性。 题目链接&#xff1a;代码随想录&…

LLaMA.cpp HTTP 服务参数: --pooling 嵌入模型 池化类型详解

LLaMA.cpp HTTP 服务参数: --pooling 嵌入模型 池化类型详解 --pooling {none,mean,cls,last,rank} 在 llama.cpp 的 embedding server 中&#xff0c;--pooling {none,mean,cls,last,rank} 参数用于指定 如何将输入文本的 token 级嵌入向量聚合为句向量。以下是各选项的详细解…

「日拱一码」027 深度学习库——PyTorch Geometric(PyG)

目录 数据处理与转换 数据表示 数据加载 数据转换 特征归一化 添加自环 随机扰动 组合转换 图神经网络层 图卷积层&#xff08;GCNConv&#xff09; 图注意力层&#xff08;GATConv&#xff09; 池化 全局池化&#xff08;Global Pooling&#xff09; 全局平均池…

IoC容器深度解析:架构、原理与实现

&#x1f31f; IoC容器深度解析&#xff1a;架构、原理与实现 引用&#xff1a; .NET IoC容器原理与实现等巫山的雲彩都消散撒下的碧色如何看淡 &#x1f50d; 一、引言&#xff1a;从服务定位器到IoC的演进 #mermaid-svg-BmRIuI4iMgiUqFVN {font-family:"trebuchet ms&…

从零开始学前端html篇3

表单基本结构表单是 HTML 中用于创建用户输入区域的标签。它允许用户输入数据&#xff08;例如文本、选择选项、文件等&#xff09;&#xff0c;并将这些数据提交到服务器进行处理。<form>&#xff0c;表单标签&#xff0c;用于创建表单常用属性&#xff1a;action&#…

Linux系统调优和工具

Linux系统调优和问题定位需要掌握一系列强大的工具&#xff0c;涵盖系统监控、性能分析、故障排查等多个方面。以下是一些核心工具和它们的典型应用场景&#xff0c;分类整理如下&#xff1a; 一、系统资源监控&#xff08;实时概览&#xff09;top / htop 功能&#xff1a; 实…

如何快速有效地在WordPress中添加Instagram动态

在当今社交媒体的时代&#xff0c;通过展示Instagram的最新动态&#xff0c;可以有效吸引读者的目光&#xff0c;同时丰富网站内容。很多人想知道&#xff0c;如何把自己精心运营的Instagram内容无缝嵌入WordPress网站呢&#xff1f;别担心&#xff0c;操作并不复杂&#xff0c…

spring容器加载工具类

在Spring框架中&#xff0c;工具类通常不需要被Spring容器管理&#xff0c;但如果确实需要获取Spring容器中的Bean实例&#xff0c;可以通过静态方法设置和获取ApplicationContext。下面是一个典型的Spring容器加载工具类的实现&#xff1a;这个工具类通过实现ApplicationConte…

定时器更新中断与串口中断

问题&#xff1a;我想把打印姿态传感器的角度&#xff0c;但是重定向的打印函数突然打印不出来。尝试&#xff1a;我怀疑是优先级的问题&#xff0c;故调整了串口&#xff0c;定时器&#xff0c;dma的优先级可是发现调了还是没有用&#xff0c;最终发现&#xff0c;我把定时器中…

用Python向PDF添加文本:精确插入文本到PDF文档

PDF 文档的版式特性使其适用于输出不可变格式的报告与合同。但若要在此类文档中插入或修改文本&#xff0c;常规方式难以实现。借助Python&#xff0c;我们可以高效地向 PDF 添加文本&#xff0c;实现从文档生成到内容管理的自动化流程。 本文将从以下方面介绍Python实现PDF中…

Quick API:赋能能源行业,化解数据痛点

随着全球能源结构的转型和数字化的深入推进&#xff0c;能源行业正面临前所未有的机遇与挑战。海量的实时数据、复杂的业务系统、以及对数据安全和高效利用的迫切需求&#xff0c;都成为了能源企业在数字化转型道路上的核心痛点。本文将深入探讨麦聪Quick API如何凭借其独特优势…