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

},

参考链接