背景简介

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

vue项目

第三方

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);
},

参考链接

在浏览器上打开、预览Excel xlsx表格文件

在浏览器上打开、预览Excel xlsx表格文件

现在的HTML5,有了FileReader文件读写API, 真是让javascript的能力大幅提升。

解析zip压缩文件、解析Excel xlsx 表格文档各种文件预览,实现起来也有了可能性,以前的js是完全无法实现的。

github找了一下,找到3个热门的excel的js开源库。

xlsx.js

Github: https://github.com/SheetJS/js-xlsx

这个是最热门的了。

exceljs

Github: https://github.com/exceljs/exceljs

xlsx-populate.js

Github: https://github.com/dtjohnson/xlsx-populate

Excel表格相关JS库 demo示例

HTML页面预览表格文件内容的更多相关文章

  1. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

  2. mvc文件上传支持批量上传,拖拽以及预览,文件内容校验等

    使用bootstrap-fileinput 使用方式: 1.nuget:Install-Package bootstrap-fileinput 2.语言本地化{下载fileinput_locale_z ...

  3. android studio 无法在可视化页面预览布局文件

    Rendering Problems the following classes could not be found:android.support.v7.internal.widget.Actio ...

  4. 文档控件NTKO OFFICE 详细使用说明之预览Excel文件(查看、编辑、保存回服务器)

    1.在线预览Excel文件 (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将www.ntko.com加入到浏 ...

  5. 文档控件NTKO OFFICE 详细使用说明之预览PDF文件(禁止打印、下载、另存为、防抓包下载)

    1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ...

  6. Android摄像头:只拍摄SurfaceView预览界面特定区域内容(矩形框)---完整(原理:底层SurfaceView+上层绘制ImageView)

    Android摄像头:只拍摄SurfaceView预览界面特定区域内容(矩形框)---完整实现(原理:底层SurfaceView+上层绘制ImageView) 分类: Android开发 Androi ...

  7. 用pdf.js实现在移动端在线预览pdf文件

    用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo ...

  8. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_13-课程预览功能开发-CMS页面预览接口测试

    5.2 CMS页面预览测试 CMS已经提供了页面预览功能,课程预览功能要使用CMS页面预览接口实现,下边通过cms页面预览接口测试课 程预览的效果. 1.向cms_page表插入一条页面记录或者从cm ...

  9. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_23-页面预览-页面预览开发

    1.用户进入cms前端,点击“页面预览”在浏览器请求cms页面预览链接. 2.cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型. 3.cms根据页面id查询页面模板内容 4.c ...

随机推荐

  1. 两个重叠的div做前后翻转

    当需要做一个翻转卡片式的div时候,需要两个div的大小等大例如: 画出两个等大的div后,将他们重叠 图中的两个div做了重叠,做重叠时候用的属性是 position: absolute; 并且需要 ...

  2. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  3. Python实现MATLAB中的 bwlabel函数

    最近做验证码识别,原本用MATLAB已经实现的整个识别模型,不过代码要部署在Linux服务器上还是需要用另外的语言实现,于是决定用Python + OpenCV来实现. bwlabel函数的作用是检测 ...

  4. C++ 函数重载二义性

    说起函数重载,我不由得想起了C++的“多态”特性.多态又分为静态(编译时)多态和动态(运行时)多态,静态多态即为函数重载,动态多态则是虚函数机制.虚函数水较深,先不讨论,今天我们来看一下函数重载.作用 ...

  5. 1.NIO概述

    /*Java NIO 简介*/ java NIO (New IO)是从 java1.4版本开始引入的一个新的IO API,可以替代标准的 java IO API (jdk1.7又对其进行了改进, 称为 ...

  6. python连接impala时,执行SQL报错expecting list of size 2 for struct args

    这个错误困扰了好久,因为集群有多台,暂放到其他几台机器上执行了SQL操作,一直在找解决方法,无意间得到真传,喜出望外啊 报错信息: Traceback (most recent call last): ...

  7. CSS基础 布局

    1.布局的基本位置 top         距离上边的距离right       距离右边的距离bottom   距离下边的距离left         距离左边的距离 去掉布局时 html 的3mm ...

  8. Vue获取数据渲染完成事件

    主要代码是这两坨 this.nextTick(function(){ alert('数据已经更新') }); this.$nextTick(function(){ alert('v-for渲染已经完成 ...

  9. vim文件时自动添加作者、时间、版权等信息

    在工作中,搞运维的工程师往往会编写或完善自动化脚本时,都会手动添加表头注释,例如版权声明.作用.时间等信息提示,如果每次都手动编辑添加会大大消耗时间,所有我们可以利用快捷方法来节省时间,一种是手动在家 ...

  10. 向量的一种特殊乘法 element wise multiplication

    向量的一种特殊乘法 element wise multiplication 物体反射颜色的计算采用这样的模型: vec3 reflectionColor = objColor * lightColor ...