VUE3（三十二）vue使用xlsx解析excel文件

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第32天，点击查看活动详情

工作中发现了一个比较有意思的前端插件xlsx，可以解析excel文件。

之前上传excel文件一般前端只负责文件上传，文件上传成功之后在后端进行解析，后端解析excel的时候使用的是phpexcel，也还是挺方便的

但是如果前端js也是可以解析excel文件的话，那么在前端交互上就比较舒服，我们可以将文件中的内容解析出来之后显示在页面上，可以让操作人在确认数据没有错误之后在点击确定将数据传递至后端。

事先说明一下：我这里使用的是vite构建的vue3+typescript项目

一：安装xlsx

yarn add xlsx
or
npm install xlsx --save

二：使用xlsx

我这里直接将我测试的代码贴出来

1：html部分（我这里使用ant-design-vue组件）

          <a-upload-dragger
            name="file"
            :multiple="false"
            @change="handleFileSelected"
          >
            <p class="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p class="ant-upload-text">
              单击或拖动文件到此区域以上传
            </p>
          </a-upload-dragger>

2：js部分

引入：

import XLSX from 'xlsx'

调用方法：

        /**
         * @name: 上传文件调用
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-08-12
         */
        const handleFileSelected = (e:any) => {
            // 实例化读取文件对象 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
            var reader = new FileReader();
            reader.onload = function () {
                var fileData = reader.result;
                var wb = XLSX.read(fileData, { type: 'binary', cellDates: true });
                // {header:1} 取消标题列.
                var rowObj:(any) = XLSX.utils.sheet_to_json(wb.Sheets['Sheet1'], { header: 1});
                data.exportTableData = rowObj;
            };
            // 已二进制的形式读取文件
            reader.readAsBinaryString(e.file.originFileObj);
            // 导入标识改为true
            data.exportSign = true;
        }