封装前端获取excle数据公共文件.docVIP

封装前端获取excle数据公共文件

一、下载读取excle数据的相关js库

js-xlsx由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

官方github：/SheetJS/js-xlsx

dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.min.js则是包含了所有功能模块。

二、创建mon.extend.js文件

mon.extend.js文件是通过引入第三方js-xlsx库来使用库里面支持的读取excle的能力

1、动态加载js-xlsx第三方JS库

functionloadJsXlsx(viewModel){

//动态引入js-xlsx库

varsecScript=document.createElement(script);

//保存传入的viewModel对象

window.viewModelInfo=viewModel;

secScript.setAttribute(type,text/javascript);

//传入文件地址subId:应用ID

secScript.setAttribute(src,`/opencomponentsystem/public/${viewModel.getParams().subId}/xlsx.core.min.js?domainKey=${viewModel.getDomainKey()}`);

document.body.insertBefore(secScript,document.body.lastChild);

}

2、动态创建页面隐藏的input框

varfileInput=document.createElement(input);

fileInput.id=file_input_info;

fileInput.type=file;

fileInput.style=display:none;

document.body.insertBefore(fileInput,document.body.lastChild);

3、读取本地excel文件，获取workbook对象

//读取本地excel文件

functionreadWorkbookFromLocalFile(file,callback){

varreader=newFileReader();

reader.onload=function(e){

varlocalData=e.target.result;

varworkbook=XLSX.read(localData,{type:binary});

if(callback)callback(workbook);

};

reader.readAsBinaryString(file);

}

4、读取excel里面数据，进行缓存

//读取excel里面数据，进行缓存

functionreadWorkbook(workbook){

varsheetNames=workbook.SheetNames;//工作表名称集合

constworkbookDatas=[];

//获取每个sheet页的数据

for(leti=0;isheetNames.length;i++){

letsheetNamesItem=sheetNames[i];

workbookDatas[i]=XLSX.utils.sheet_to_json(workbook.Sheets[sheetNamesItem]);

}

//对获取的数据进行缓存

window.viewModelInfo.setCache(workbookInfoDatas,workbookDatas);

}

5、给文件input注册改变事件

//给文件input注册改变事件

document.getElementById(file_input_info).addEventListener(change,function(e){

varfiles=e.target.files;

if(files.length==0)re