vue通过Export2Excel.js进行导入excel,获取数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue通过Export2Excel.js进行导入excel,获取数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<!--    封装的模板下载和导入按钮和功能组件-->


<template>
  <span style="margin-left: 10px">
    <el-button size="mini" class="el-icon-download" @click="downFiles"> 下载模板</el-button>
    <el-upload
      action=""
      style="width: 115px;display: inline-block;margin-left: 10px"
      :http-request="uploadSectionFile"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeUpload"
      :show-file-list="false"
      :accept="accept"
    >
      <el-button class="el-icon-upload" size="mini">批量导入</el-button>
    </el-upload>
  </span>
</template>

<script>
import XLSX from 'xlsx'

import Blob from './Excel/Blob'
import Export2Excel from './Excel/Export2Excel.js'


export default {
  name: 'importTemplate',
  data() {
    return {
      accept: '.xlsx',
      fileTemp: {}, // 导入的文件流
      tableData: []
    }
  },
  methods: {
    downFiles() {
      // <a href="./static/培训实施参加人员统计模板.xlsx"><i className="el-icon-download"/>下载模板</a>
      window.open('/static/培训实施参加人员统计模板.xlsx')
    },
    uploadSectionFile(uploader) {
      this.fileTemp = uploader.file
      if (this.fileTemp) {
        if ((this.fileTemp.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') ||
          (this.fileTemp.type === 'application/vnd.ms-excel')) {
　　　　　　
          this.importfEx(this.fileTemp)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请删除后重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }
    },
    importfEx(event) {
      // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
      const fileReader = new FileReader()
      const file = event
      // 回调函数
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, { type: 'binary' })
          // excel读取出的数据
          const excelData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
          // 将上面数据转换成 table需要的数据---将获取到的数据$emit抛出数据
          this.$emit('changeImportData', excelData)
        } catch (e) {
          this.$message({ type: 'error', message: '文件类型不正确!' })
          return false
        }
      }
      // 读取文件 成功后执行上面的回调函数
      fileReader.readAsBinaryString(file)
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      // this.vm.edit.data.contractProjects.push({})
    },
    beforeUpload(file) {
      if (this.accept !== '') {
        const index = file.name.indexOf('.')
        const type = file.name.substring(index + 1, file.name.length)
        if (this.accept.indexOf(type) === -1) {
          this.$message.error(`文件 ${file.name}格式不正确,请上传指定格式的文件 ${this.accept}`)
          return false
        }
      }
    }
  }
}
</script>

<style scoped>

</style>

<!--   2. 父组件调用封装的组件-->

<template>

<!--              //导入excel  下载模板组件-->
<import-template @changeImportData="changeImportDataFun" />

</template>

methods: {
  changeImportDataFun(dataArr) {
    // 返回的数组数据
  },
}

vue通过Export2Excel.js进行导入excel,获取数据

文章来源地址https://www.toymoban.com/news/detail-413182.html

到了这里，关于vue通过Export2Excel.js进行导入excel,获取数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

vue通过Export2Excel.js进行导入excel,获取数据

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2