Element-ui获取上传的Excel并预览

最新推荐文章于 2024-07-24 16:25:14 发布

原创

最新推荐文章于 2024-07-24 16:25:14 发布 · 2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#excel #javascript #js #elementui

本文介绍如何使用SheetJS进行Excel文件的解析，并结合Element-UI的upload组件实现前端上传功能。文章提供了具体代码实例，展示了如何验证文件类型及读取Excel内容。

前言

之前写了一篇《SheetJS生成/解析Excel》，并在实际项目中使用了，因为项目使用的是 Element-UI 写的，其中，用了 upload 组件。

实践

直接上代码(这里借用了之前的解析代码)：

<el-upload
    ref="upload"
    limit="1"
    action=""
    :auto-upload="false"
    :on-change="parseExcel"
></el-upload>

export default {
   
   
    data: funct

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IMJCW

关注关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
7
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue+element-ui实现上传及预览文件

weixin_48787059的博客

02-09

1万+

目录标题前言上传文件实现代码预览文件实现代码前言上篇文章分享了微信小程序上传及预览文件的方法，本篇文章来分享一下vue+element实现上传及预览文件的方法,upload上传文件方法，是element-ui提供的方法，主要是利用其参数绑定方法进行上传操作，有想要深入了解的/博友，可到element-ui官网查看。window.open(url)可打开想要查看的文件，这些也是我最近搜索到的并且亲自实践过的,如果觉得有用，可上滑查看实现代码。上传文件实现代码 <!-- show-file-l

Element-UI全面入门与实战技巧

全世界的博客

06-06

2075

Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开发并维护。它提供了一系列丰富的 UI 组件，旨在帮助开发者快速构建高效、美观的 Vue 应用程序。Element-UI 是一款遵循 Ant Design 设计规范的 Vue UI 库，它涵盖了从按钮、输入框、选择器到表格、标签、进度条等众多常用的界面元素。Element-UI 的组件不仅功能全面，而且易于定制，使得开发者可以快速实现个性化的页面设计。Element-UI 的特点包括：在使用 Element-UI 之前，需要确

7 条评论您还未登录，请先登录后发表或查看评论

element-ui上传下载excel（超详细der）

weixin_33757609的博客

02-13

2375

1. 上传 EXCEL Upload组件点击跳转到该组件官方文档用到的upload组件参数参数说明类型可选默认值 action 必选参数，上传的地址 string --- --- file-list 上传的文件列表 array --- [] accept 接受上传的文件类型 string --- -...

使用Vue，Element-ui导入Excel并预览显示数据，并经数据保存传至后台数据库

weixin_41346436的博客

05-22

8659

需求：基于Vue，Element-ui框架，将本地Excel上传，并将表格中的数据绑定显示在上传页面，并保存提交到后台数据库此功能在做的时候网上有很多的案例，但是都是基于Export2Excel.js文件和Blob.js文件来做的，我做的这个不是这种的，感觉还是比较有难度的，因此做了记录，希望能帮助你首先看下总体的演示效果：废话不多说，先上代码块 template中的结构代码  <!--文件上传组件就不多介绍，Element-UI官网还是比较详细的

element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件（浏览器打开文件的方式）

浮萍的博客

06-22

1万+

此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的，word、excel是直接下载、pdf浏览器打开的形式，如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。......

vue-element-xlsx在线读取Excel数据预览，2024年最新【设计思想解读开源框架

2401_84139908的博客

04-11

1238

data() {return {},methods: {//解析exceltry {});//循环读取每个文件//若当前sheet没有数据，则continuecontinue;console.log(“读取文件”);//这里的rowTable的属性名注意要与上面表格的prop一致//sheetArray的属性名与上传的表格的列名一致rowTable.name = sheetArray[item].姓名;

vue-element-xlsx在线读取Excel数据预览

IT-精英联盟

09-22

5368

vue-element-xlsx在线读取Excel数据预览 1.安装XLSX npm install xlsx -s 2.复制过去就可以用 <template> <div>  <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" ...

element-ui 上传excel成功后在页面展示excel内数据与图片

Madoll99的博客

06-14

1286

问题描述 element-ui前端处理上传excel，源文件格式不规则，其中包含的图片直接读取无法读到内容

vue elementui 页面预览导入excel表格数据

最新发布

qq_53911056的博客

07-24

3733

本文主要内容：用elementui的Upload 组件上传Excel文件，上传后的列表采用xlsx插件实现点击预览表格内容效果。在项目中可能会有这样的需求，有很多种方法实现。但是不想要跳转外部地址，所以用了xlsx插件来解析表格，并展示表格内容。

使用el-upload上传excel文件并读取显示到el-table上

weixin_43258184的博客

12-10

3168

页面定义上传按钮： <el-upload action="/上传文件的接口" :on-change="onChange" :auto-upload="false" :show-file-list="false" accept=".xls, .xlsx"> <el-button v-waves size="mini" type="warning" icon="el-icon-folder-add"> 上传

vue + element excel表格导出/上传预览

不二喵老师

09-04

1303

1.导出 a) 在项目中安装插件 npm install -S file-saver xlsx npm install -D script-loader b) 把这个文件放在下图所示位置接下来：直接贴源码 <template> <div> <el-button :loading="downloadLoading" :size=size :type=type @click="exportBtn()">{{btn_text}}<.

使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件

weixin_30864831的博客

01-12

1850

最初使用该组件实现图片上传是没有问题的，前后端配合，最终实现想要的效果，组件使用过代码如下:将文件拖到此处，或点击上传现在改为使用该组件实现Excel文件上传，组件的使用几乎是不变的，代码如下：将文件拖到此处，或点击上传一次只能上传一个文件，仅限text格式，单文件不超过1MB触发的方法如下代码：// 上传文件之前的钩子beforeUpload (file) {console.log('befor...

element-ui的upload上传excel文件记录

zcfzfc123456789的博客

05-19

979

因为项目需要手动上传，不直接提交到服务器，所以设置了不自动上传 el-upload的常用属性 limit:限制上传文件的个数 auto-upload:自动上传 multiple:支持多文件上传 action:上传的文件地址，指定了auto-upload属性，会自动提交到action的地址 accept:文件的类型钩子函数 on-preview:选择文件后，显示文件列表，点文件列表，就会触发 on-remove:文件列表移除文件触发 before-upload:是上传文件之前触发的函数，一旦设置auto

elementui: 上传excel

qq_36413371的博客

05-17

896

方法1. 得到excel的josn数据,进行手动上传到后台 [{“模板所属类目”:“1,17”,“模板种类”:1,“标题”:“这是标题”,“关键词”:“申达股份;haha”,“参数类型”:“1;2”,“参数示例”:“撒旦法;似懂非懂”,“场景说明”:“萨芬的”,“消息优先级”:4}] <vk-button type="primary" size="small"

vue+Element+xlsx 导入并预览

qq_42928070的博客

01-07

3661

下载插件 cnpm install xlsx --save 引入import XLSX from ‘xlsx’ element中prop可以为汉字这样就简单多了，省去解析的数据再去遍历修改成英文注意prop中使用的是汉字 <el-table :data="tableData" style="width: 100%"> <el-table-column v-for=...

vue + element ui upload 实现导入上传Excel表格功能

honeymoon_的博客

07-22

1638

1. 首先是模板 <template> <div class="import-list"> <el-button class="import-button" @click="uploadFiles"> <i class="icon"></i> 导入公司{{title}} </el-button> <el-dialog class="dialog-box"

element-ui文件预览

04-18

Element UI是一套基于Vue.js的桌面端组件库，提供了丰富的UI组件和交互效果，方便开发者快速构建Web应用程序。在Element UI中，文件预览是其中一个功能模块，用于展示和预览各种类型的文件。 Element UI的文件预览功能主要包括以下几个方面： 1. 支持多种文件类型：Element UI的文件预览功能支持常见的文件类型，如图片、PDF、Word文档、Excel表格等。 2. 界面友好：文件预览组件提供了一个美观、直观的界面，用户可以通过缩放、旋转等操作来查看文件内容。 3. 自定义配置：开发者可以根据自己的需求对文件预览组件进行配置，例如设置预览窗口大小、是否显示工具栏等。 4. 事件回调：文件预览组件提供了一些事件回调函数，开发者可以通过这些回调函数来处理用户的操作或获取预览结果。