js上传xlsl读取表格里的数据

最新推荐文章于 2024-11-16 03:03:42 发布

郭玉齐

最新推荐文章于 2024-11-16 03:03:42 发布

阅读量457

点赞数 2

分类专栏：笔记文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq706352062/article/details/120129114

版权

笔记专栏收录该内容

113 篇文章

订阅专栏

这篇博客展示了如何使用XLSX库在Vue应用中读取和解析Excel文件。通过`el-upload`组件实现文件上传，然后通过`file2Xce`方法将文件转换为JSON数据。当文件格式不正确时，会提示用户重新选择。

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

1.npm install xlsx --save-dev

<div class="btn">
      <el-upload
        ref="upload"
        action="/"
        :show-file-list="false"
        :on-change="importExcel"
        :auto-upload="false">
        <el-button
          slot="trigger"
          icon="el-icon-upload"
          size="small"
          type="primary">
          上传文件
        </el-button>
      </el-upload>
    </div>

<script>
import XLSX from 'xlsx'
export default {
  name: 'HelloWorld',
  data () {
    return {
      wb: '',
      xlsxJson: '',
     
    }
  },
  mounted() {
  },
  methods: {
    importExcel(file) {
      // let file = file.files[0] // 使用传统的input方法需要加上这一步
      const types = file.name.split('.')[1]
      const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
      if (!fileType) {
        this.$message('格式错误！请重新选择')
        return
      }
      this.file2Xce(file).then(tabJson => {
        if (tabJson && tabJson.length > 0) {
          this.xlsxJson = tabJson
          console.log('数据', this.xlsxJson)
        
     
        }
      })
    },
    file2Xce(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        reader.onload = function(e) {
          const data = e.target.result
          this.wb = XLSX.read(data, {
            type: 'binary'
          })
          const result = []
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            })
          })
          resolve(result)
        }
        reader.readAsBinaryString(file.raw)
        // reader.readAsBinaryString(file) // 传统input方法
      })
    }
  
  },
}
</script>