本文系原创,转载请注明出处:
https://blog.csdn.net/chengbao315/article/details/83713219
在前一篇文章中,我利用 xlsx.js 插件实现了Excel 导入的功能,本周我又接到了新的需求,要求界面加载时自动读取指定 Excel 文件数据,实现导入Excel 功能。开始时,我感觉这有何难?基本上跟之前的设计没有啥区别嘛,把按钮的点击事件处理放到加载处理中不就可以了么?尝试了一下,结果并没有那么简单。。。
下面我着重讲述一下我踩坑的过程,xlsx.js 插件需要基于一个file 对象读取数据,而这个file 对象来源于 Input 标签的 fileList 对象,起初我的想法是将 input 标签隐藏,然后再动态给 input 标签属性 Value 赋值,最后调用来解决这个问题。后来我发现,无论我怎么尝试都是无法实现的,后来查找各种资料,才了解到 在 HTML 文档中 ,<input type="file"> 标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性,保存了用户指定的文件的名称,为安全起见,file-upload 元素的value 属性是只读的,不允许程序员修改它的值,并且HTML value 属性也会被忽略。
当我看到了这一说明时,顿生万箭穿心之痛啊,说好的半天解决问题,这下子又要换方案了,根本评估不了还要花费多久。后来我发现,原来I浏览器自带的 ActiveXObject 对象本身就可以完美的解决这个问题,根本不需要别的插件,下面我就来用这种方式来实现之前文章中的例子。
为了减少代码的重复编写,我只对上一篇的demo.js 代码进行了简单修改,将加载函数中的其他代码都删除,只保留一个导入函数的调用,不需要参数,看代码:
$(document).ready(function () {
importf();
})
导入函数 importf() 也只需要简单修改,将获取Excel json数据之前的带全删除,获取json 数据重新编写一个方法,其他不需要改变,看代码:
function importf() {//导入
// 获取 EXCEL json数据
var jsondata = sheet_to_json();
var column = [];
var data = [column];
for (var key in jsondata[0]) {
data[0].push(key);
}
for (var i = 0; i < jsondata.length; i++) {
var row = [];
data.push(row);
for (var key in jsondata[i]) {
data[i + 1].push(jsondata[i][key]);
}
}
creattable(data);
getMultiBarChart(data);
}
重点来了,获取Excel json 数据是本文的重点,我们重新定义一个函数,然后new 一个ActiveXObject 对象,然后将默认的文件路径赋值进去(主要是全路径,不能是相对路径) ,然后循环读取Excel 的每个Cell 的数据,赋值给一个 json 数组即可,看代码:
function sheet_to_json() {
var oXL = new ActiveXObject("Excel.Application");
var filePath = "C:\\Users\\Administrator\\Desktop\\code\\ActiveXObject\\test_files\\测试表格.xlsx";
var oWB = oXL.Workbooks.open(filePath);
oWB.worksheets(1).select();
var oSheet = oWB.ActiveSheet;
var jsondata = [];
for (var row = 1; (oSheet.Cells(row, 1) + '') != 'undefined'; row++) {
for (var col = 1; (oSheet.Cells(row, col) + '') != 'undefined'; col++) {
if (row > 1) {
jsondata[row - 2] += '"' + oSheet.Cells(1, col).value + '":' + '"' + oSheet.Cells(row, col).value + '",';
}
}
if (row > 1) {
jsondata[row - 2] = JSON.parse(('{' + jsondata[row - 2].substr(0, jsondata[row - 2].lastIndexOf(',')) + '}').replace('undefined', ''));
}
}
oWB.close();
oXL.Application.Quit();
return jsondata;
}
以上代码就可以实现今天想要达到的加载页面时导入指定 Excel 文件数据的功能,如果想界面再简洁一点,可以界面页不需要的控件标签删掉。最终运行的结果如下: