JS 导入Excel数据

需要依赖 xlsx.js 插件，插件可自行到官网下载最新依赖

效果图：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS Excel导入表格数据</title>
  <style>
    table {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px;
    }
  </style>
</head>

<body>
  <input type="file" onchange="readExcel(this)" />
  <div id="d1"></div>
  <script src="xlsx.full.min.js"></script>
  <script>
    function readExcel(file_obj) {
      let reader = new FileReader();
      let file = file_obj.files[0];
      reader.readAsBinaryString(file);
      reader.onload = function (e) {
        let data = e.target.result;
        let wb = XLSX.read(data, { type: 'binary' });
        sheetName = wb.SheetNames[0] // 获取文档中第一个sheet页签的名字
        sheets = wb.Sheets[sheetName] // 获sheet名页签下的数据
        // console.log(sheets);
        const htmlList = XLSX.utils.sheet_to_json(sheets) // sheet页签的内容转化为json数据
        // console.log(htmlList);

        let html = ''
        let state = false // 判断是否表格
        for (const item of htmlList) {
          // 开始渲染表格，设置属性
          if (item.__EMPTY === '        <table>') {
            state = true
            item.__EMPTY = '        <table border="1" id="mytable">'
          }

          // 结束渲染表格
          if (item.__EMPTY === '        </table>') {
            state = false
            html += item.__EMPTY
          }
          if (state === false) continue

          // 渲染格子
          for (const key in item) {
            const element = item[key];
            html += element
          }
        }
        document.getElementById('d1').innerHTML = html
      };
    }</script>
</body>
</html>

posted @ 2022-11-21 14:51 前端-大雄阅读(1330) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JS JSON表格数据导出Excel

· HTML转Canvas转图片下载

· 导入xls到页面

· Javascript导入Excel

· 导出excel，前端sheetjs表格工具

前端-大雄

JS 导入Excel数据

公告

最新随笔

随笔分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论