2024/04/19——VUE开发EXCEL上传

最新推荐文章于 2024-06-27 01:15:00 发布

薯味

最新推荐文章于 2024-06-27 01:15:00 发布

阅读量283

点赞数 8

文章标签： vue.js excel javascript

本文链接：https://blog.csdn.net/qq_42555061/article/details/137965482

版权

本文介绍了如何在Vue项目中使用HTML模板和XLSX库实现文件上传功能，重点是处理Excel文件并将其转换为JSON数据。

摘要由CSDN通过智能技术生成

VUE开发EXCEL上传

HTML

<template>
  <div class="table">     
    <div>
      <el-upload                
        class="upload-demo"                
        ref="upload"                
        action=""                
        :auto-upload="false"                
        :file-list="fileList"                
        :on-change="handleChange"                
        multiple                
        :show-file-list="false"                
      >              
      <el-button type="text">点击上传</el-button>                         
      </el-upload>
    </div>
  </div>
  </template>
<script>
// echarts
import XLSX from 'xlsx';
export default {
  data() {
    return {    
      fileList:[],            
		  file:""
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = [fileList[fileList.length - 1]]; // 只能上传一个Excel，重复上传会覆盖之前的        
      this.file = file.raw;
      let reader = new FileReader()
      let _this = this
      reader.readAsArrayBuffer(this.file)
      reader.onload = function () {
        let buffer = reader.result
        let bytes = new Uint8Array(buffer)
        let length = bytes.byteLength
        let binary = ''
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        let XLSX = require('xlsx')
        let wb = XLSX.read(binary, {
          type: 'binary'
        })
        let outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
        console.log(outdata)
        //这个里面的this，不是当前dom，上面有函数
      }
    },
  },
};
</script>