js通过xlsx.js实现表格的处理

冯浩(grow up)

已于 2022-12-17 10:55:48 修改

阅读量2.1k

点赞数 1

分类专栏： js使用技巧文章标签： javascript 前端开发语言 vue.js json

于 2022-09-04 17:30:19 首次发布

本文链接：https://blog.csdn.net/m0_50207524/article/details/126691314

版权

js使用技巧专栏收录该内容

7 篇文章 1 订阅

订阅专栏

js实现.xls文件导入

前言
js读取.xls文件

前言

在开发中导入功能是必不可少的，通过xlsx.js可以实现对表格的处理

js读取.xls文件

读取.xls文件需要引用的js组件地址

<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.core.min.js"></script>

1、为文件输入框添加change事件

<input type="file" onchange="importf(this)" />

2、获取文件

	function importf(obj) {
        //导入
        if (!obj.files) {
          return;
        }
        // 获取文件数据流
        var f = obj.files[0];
        // 读取文件内容
        var reader = new FileReader();
        reader.onload = function (e) {
          // 读取的结果
          var data = e.target.result;
          wb = XLSX.read(data, {
            type: "binary",
          });
          // 对获取到的数据进行转码，这就是我们读取到的文件
          //wb.Sheets:获取第一个Sheet的数据
          // wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
          const jsonSheetName = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        };
      }

![在这里插入图片描述](https://img-blog.csdnimg.cn/1303e4e6114344b28813b26639c9f81c.png

4、jsonSheetName就是获取到的表格数据就可以对grid进行渲染赋值了

在这里插入图片描述

5、整体代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.core.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/handsontable/8.3.2/handsontable.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
  </head>

  <body>
    <input type="file" onchange="importf(this)" />
    <div id="demo"></div>
    <h3 class="demo-preview">表单预览</h3>
    <div id="example1"></div>
    <div id="controls"></div>
    <script>
      var wb; //读取完成的数据
      var rABS = false; //是否将文件读取为二进制字符串

      function HandsontableFun(data) {
        var container = document.getElementById("example1");

        var hot = new Handsontable(container, {
          data,
          height: window.screen.height / 1.7,
          language: "zh-Cn",
          readOnly: true,
          mergeCells: true,
          autoRowSize: true,
          mergeCells: [
            // {row: 1, col: 1, rowspan: 1, colspan: 3},
          ],
          colWidths: 100,
          colHeaders: true,
          rowHeaders: true,
          autoColumnSize: true,
          manualColumnResize: true,
          licenseKey: "non-commercial-and-evaluation",
        });
        hot.refreshDimensions();
      }

      function importf(obj) {
        //导入
        if (!obj.files) {
          return;
        }
        // 获取文件数据流
        var f = obj.files[0];
        // 读取文件内容
        var reader = new FileReader();
        reader.onload = function (e) {
          // 读取的结果
          var data = e.target.result;

          wb = XLSX.read(data, {
            type: "binary",
          });


          // 对获取到的数据进行转码
          const jsonSheetName = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          document.getElementById("demo").innerHTML = JSON.stringify(jsonSheetName);
          HandsontableFun(jsonSheetName);
        };
        if (rABS) {
          reader.readAsArrayBuffer(f);
        } else {
          reader.readAsBinaryString(f);
        }
      }


    </script>
  </body>
</html>