html页面上传excel,HTML页面预览表格文件内容

背景简介

在将一个表格文件上传到服务器上之前，JS读取表格文件并将文件内容输出到页面中

vue项目

第三方

exceljs

安装

npm install exceljs

element ui

文件选择

el-upload

数据展示

el-table

代码以及说明

import Excel from 'exceljs'; // 引入exceljs

// 预览表格文件

previewFile(){

let _this=this

// 获取选择的文件

let file = this.file

let reader = new FileReader();

// 在读取器加载资源停止进度时读取表格文件

reader.onloadend = event=>{

// arrayBuffer为加载后的资源

let arrayBuffer = reader.result;

let workbook = new Excel.Workbook();

workbook.xlsx.load(arrayBuffer).then((workbook)=> {

let result = ''

// 只读取文档的第一个sheet页

let sheet= workbook.worksheets[0]

let tableData=[]

// 获取每一行的数据

sheet.eachRow((row, rowNumber)=> {

let data=[]

row.values.forEach((val,valIdx)=>{

data.push(val)

})

tableData.push(data)

_this.tableData=tableData

})

};

reader.readAsArrayBuffer(file);

参考链接

html页面上传excel,HTML页面预览表格文件内容相关推荐

在web页面预览PDF文件
先说说基本思路: 1.点击某个文件名称的连接时获取到文件序号,即保存在文件表中的主键序号: 2.通过AJAX将序号传入到后台,从文件表中查询文件信息,并使用openOffice将文档转成PDF文件: ...
Excel怎么大图预览表格中的图片？
1.如下图excel表格中有一些图片,现在我们想要大图预览查看这些图片 2.鼠标点击[图片工具]选项 3.接着我们鼠标点击[图片预览]选项 4.图片如果有点小不好查看,我们就点击[放大]选项 ...
h5页面预览pdf文件_H5移动端在线浏览pdf文件，推荐插件TouchPDF
pdf.png 公共的pdf页面可以自己写,调用插件的代码也相对简单: seePDF.html seePDF.js $(function() { //文件服务器的路径 var picDownloadS ...
学成在线--10.页面预览
文章目录一.需求分析二. 搭建环境 1.在cms服务中集成freemarker: 2.在application.yml配置freemarker 三.Service 四.Controller 五.页 ...
js页面上的excel导出
js页面上的excel导出这里的代码是网上转别人的感觉还不错,可以试试. <html> <head> <script type="text/javascrip ...
CSS @page 规则设置打印页面框的尺寸，方向和页边距，用于打印预览和从浏览器打印Web文档
@page规则定义styleSheet中页面框的尺寸,方向和页边距,用于打印预览和从浏览器打印Web文档.通常,在此构造中,各种CSS属性(如大小,页面和边距)用于指定页面框的尺寸,方向,边距等. 页 ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
文件上传，下载，预览，删除（File），分页接口
文件上传,下载,预览,删除(File) 1.公共参数方法 1.1公共返回类型定义 1.2 分页接口 1.3公共实体类 1.4 公共的 mapper.java/xml(都放在一起) 1.4.1 File ...
Jasperreport_6.18的吐血记录三之简易交叉表 + 页面预览和导出
承接上篇第二章主要介绍了目录页的一些预览技巧,包括字体库注入到软件中,最后的目录页顺利的生成了,中间有几个小坑也给小伙伴们说了一下,报表在于要细心和耐心,不要急于求成,慢慢入手,终有成效! 本章准备 ...

html页面上传excel,HTML页面预览表格文件内容

html页面上传excel,HTML页面预览表格文件内容相关推荐

最新文章

热门文章