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

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

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

官方github：https://github.com/SheetJS/js-xlsx

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

二、 创建xlsx.common.extend.js文件

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

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

function loadJsXlsx(viewModel){
    //动态引入js-xlsx库
    var secScript = 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框

var fileInput= 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文件
function readWorkbookFromLocalFile(file, callback) {
    var reader = new FileReader();

    reader.onload = function(e) {
        var localData = e.target.result;
        var workbook = XLSX.read(localData, {type: 'binary'});
        if(callback) callback(workbook);
    };
    reader.readAsBinaryString(file);
}

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

//读取excel里面数据，进行缓存
function readWorkbook(workbook) {
    var sheetNames = workbook.SheetNames; // 工作表名称集合

    const workbookDatas = [];
    //获取每个sheet页的数据
    for(let i=0; i<sheetNames.length; i++){
      let sheetNamesItem = 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) {
    var files = e.target.files;

    if(files.length == 0) return;

    var filesData = files[0];
    //读取本地excel文件
    readWorkbookFromLocalFile(filesData, function(workbook) {
        //读取excel里面数据，进行缓存
        readWorkbook(workbook);
    });
});

• 6、触发文件点击事件

//触发文件点击事件
function selectFile(){
    document.getElementById('file_input_info').click();
}

三、 在YB设计器里面引入定义好的外部文件

• 1、引入外部文件xlsx.common.extend.js和xlsx.core.min.js文件

图 1

• 2、在YB引用excel封装的文件

图 2

四、 以下为xlsx.common.extend.js文件全部代码

xlsx.common.extend.js文件暂时不支持远程excel解析（后续会放开）

//1、加载js-xlsx
function loadJsXlsx(viewModel){
    //动态引入js-xlsx库
    var secScript = 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
var fileInput= document.createElement("input");

fileInput.id = 'file_input_info';
fileInput.type = 'file';
fileInput.style = 'display:none';
document.body.insertBefore(fileInput, document.body.lastChild);

//读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
    var reader = new FileReader();

    reader.onload = function(e) {
        var localData = e.target.result;
        var workbook = XLSX.read(localData, {type: 'binary'});
        if(callback) callback(workbook);
    };
    reader.readAsBinaryString(file);
}

//读取excel里面数据，进行缓存
function readWorkbook(workbook) {
    var sheetNames = workbook.SheetNames; // 工作表名称集合

    const workbookDatas = [];
    //获取每个sheet页的数据
    for(let i=0; i<sheetNames.length; i++){
      let sheetNamesItem = sheetNames[i];
      workbookDatas[i] = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNamesItem]);
    }
    //对获取的数据进行缓存
    window.viewModelInfo.setCache('workbookInfoDatas',workbookDatas);
}

//给文件input注册改变事件
document.getElementById('file_input_info').addEventListener('change', function(e) {
    var files = e.target.files;

    if(files.length == 0) return;

    var filesData = files[0];

    readWorkbookFromLocalFile(filesData, function(workbook) {
        readWorkbook(workbook);
    });
});

//触发文件点击事件
function selectFile(){
    document.getElementById('file_input_info').click();
}