input file组件选中Excel文件后,通过Bootstrap Table实现Excel表单数据预览

项目中有一个功能是选中一个Excel文件后,在页面中展示其内容,我们的列表数据都是使用Bootstrap Table展示的,于是就研究了一下怎么结合Bootstrap Table实现这个功能,最后终于搞定了,下面是实现代码

    
未上传文件

注:除了要引入bootstrap以及bootstrap table相关的js、css文件外,还需要引入专门用于处理excel文件的js插件 xlsx.core.min.js,点击进去右键网页另存为到本地,复制到项目中合适的文件夹,然后就可以引用了。

参考文章:
1、Bootstrap Table通过JS生成数据源并且加载到表格中,采用client方式分页
2、使用js-xlsx库,前端读取Excel报表文件
3、bootstrap改变上传文件按钮样式,并显示已上传文件名

最终效果如下

你可能感兴趣的:(input file组件选中Excel文件后,通过Bootstrap Table实现Excel表单数据预览)