vue封装excel处理工具

最新推荐文章于 2024-03-27 15:30:41 发布

涷土

最新推荐文章于 2024-03-27 15:30:41 发布

阅读量217

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/ninjia250/article/details/117151162

版权

本文介绍了如何在Vue项目中封装Excel处理工具，包括安装xlsx插件，创建UploadExcel组件，通过ref调用组件方法上传文件，获取并处理Excel数据，以及封装日期转换函数，确保日期格式符合后端接口要求。

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

1. 安装必要的插件 npm install xlsx -S

2. 创建 UploadExcel.vue 文件并全局注册

<template>
  <div>

    <input
      ref="excel-upload-input"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleClick"
    >

    <!-- <div
      class="drop"
      @drop="handleDrop"
      @dragover="handleDragover"
      @dragenter="handleDragover"
    >
      拖到框内上传文件
    </div> -->

    <!-- <el-button
      :loading="loading"
      @click="handleUpload"
    >
      上传文件
    </el-button> -->

  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  props: {
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function, // eslint-disable-line
  },
  data() {
    return {
      loading: false, // 控制 加载中的圈圈
      excelData: {
        header: null,
        results: null
      }
    }
  },
  methods: {
    generateData({ header, results }) {
      this.excelData.header = header
      this.excelData.results = results
      this.onSuccess && this.onSuccess(this.excelData)
    },
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      const files = e