html如何自动导入excel,Javascript 实现 Excel 导入生成图表功能

前一段时间做了一个用 JS 实现图表显示的功能，加上这次的Excel 导入功能，最终的效果是这样的：

怎么样？如果看了心动的话，就接着往下看吧。 本次的这个设计需要用到几个插件：jquery.js、xlsx.js、echarts.js，大家需要提前进行下载，之后新建demo.html，demo.js，style.css文件，然后新建一个你想要操作的EXCEL文件，我这里的例子是这样的：

好了，先看HTML代码，引入js，然后使用div布局，代码如下：

Excel图表生成工具

Excel图表生成工具

选择文件

这里需要强调一下，选择文件的 “input” 标签的美化效果，这个标签在css 样式中会隐藏，我用另一个 “a” 链接标签实现点击按钮的作用，后续的效果在 js 代码中实现。

接着看 js 代码， js 中 “a” 标签点击事件中触发 “input” 标签点击事件，然后再给文本赋值，显示文件路径，之后调用导入Excel 方法：

$(document).ready(function () {

$('#select_btn').click(function () {

$('#select_file').trigger('click');

})

$('#select_file').change(function () {

$('#select_text').val($('#select_file').val());

importf(this);

})

})

接下来实现导入Excel 方法，定义一个wb变量用于接收读取的EXCEL文档数据，读取过程是调用 xlsx.js 插件 实现的，官方demo中有标准的写法，这里不用纠结为什么这么写，知道这么用就可以&#