利用 js-xlsx 实现选择 Excel 文件在页面显示

最新推荐文章于 2024-08-22 14:13:02 发布

_陈平安

最新推荐文章于 2024-08-22 14:13:02 发布

阅读量6.1k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41632399/article/details/81518906

版权

如何将选择的文件转为json数据

1.将 xlsx.full.min.js 导入到页面中；

2.然后通过 FileReader 对象读取文件利用 js-xlsx 转成 json 数据

将得到的json数据渲染到页面上

1.由于选择的Excel文件属于表格，渲染时选用 table tr td 等标签；

2.获取表头数据，得到表格列数和列名；

3.通过 for 循环创建 tr 和 td，并给 td 标签添加上列名；

4.对数据对象进行遍历，通过数据对象的键名和 td 标签的列名给对应的 td 添加内容；

5.为了使空白的表格可以编辑，在创建 td 时通过 $.html 的方法添加 input 标签，在给 td 添加内容时同样使用 $.html 进行，把不需要 input 标签的 td 的 html内容重写。

代码示例如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>js-xlsx读取文件并展示</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"&g