vue+js+xlsx解析导入xlsx表格、解决el-upload只上传一次问题

最新推荐文章于 2024-06-28 18:47:54 发布

山谷里的杂货铺

最新推荐文章于 2024-06-28 18:47:54 发布

阅读量1.4k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_58528200/article/details/122995783

版权

本文介绍了在前端使用Vue.js和xlsx库解析xlsx表格，将数据转换为table格式并传递给二级页面的需求。在实现过程中遇到的问题包括：导入xlsx库后打印为undefined，以及el-upload组件只能上传一次文件。解决方法分别是使用require('xlsx')而不是import导入库，以及在on-change事件中清除已上传文件的浏览器缓存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：前端导入xlsx表格，并解析成table数据传参给二级页面

最后解决代码：

导入插件： npm install xlsx --save

this.$toast({})是封装的信息弹窗组件

<el-upload
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :auto-upload="false"
          :show-file-list="false"
          :limit="1"
          accept=".xls,.xlsx"
          :on-change="changeHandle">
          <div class="button purpleMinor">批量分配</div>
        </el-upload>
<script>
var XLSX = require("xlsx")
changeHandle(file,fileList) {
      this.$refs.upload.clearFiles() // 上传成功之后清除历史记录
      console.log(file,'file')
      console.log(fileList,'fileList')
      let type = fil