vue2使用xlsx在线解析excel实现

原创

已于 2023-05-18 17:06:00 修改 · 1.5k 阅读

标签

#vue.js #npm #前端

收录于

于 2023-05-18 16:42:21 首次发布

该文章描述了在Vue.js应用中如何实现xlsx文件的上传和解析。首先，通过npm安装xlsx依赖，然后在组件中引入并设置上传控件。用户选择文件后，通过FileReader读取二进制数据，使用XLSX库将数据转换为JSON格式。最后，文章展示了如何处理和展示解析后的数据。

1，引入对应的依赖

npm install xlsx

2，导入对应的依赖包

3，上传组件方法编码

<el-upload
          class="upload-demo"
          ref="upload"
          action
          :limit="1"
          accept=".xlsx, .xls"
          :show-file-list="true"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary">上传台账数据</el-button>
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload"
          >解析xlsx</el-button>
          <!-- <div slot="tip" class="el-upload__tip">仅允许导入xls、xlsx格式文件。</div> -->
    &nbs