iview+vue实现导入EXCEL预览功能

发布时间:2023-10-19 08:00

本文实例为大家分享了iview+vue实现导入EXCEL预览的具体代码,供大家参考,具体内容如下

Xboot中,前端实现导入EXCEL预览功能

HTML部分


  
      
                            当前选择文件:{{ uploadfile.name }}                      
      导入前请下载查看导入模版数据文件查看所需字段及说明,确保数据格式正确,不得修改列英文名称      
             
                           
     

需要引入

1、安装插件

npm i xlsx

2、引入

import XLSX from "xlsx";

data中定义

importFile: importEquipment,//接口
accessToken: {},
uploadfile: {
     name: ''
},
importColumns: [],
importTableData: [],

js代码

//导入数据
    beforeUploadImport(file) {
      this.uploadfile = file
      const fileExt = file.name
        .split('.')
        .pop()
        .toLocaleLowerCase()
      if (fileExt == 'xlsx' || fileExt == 'xls') {
        this.readFile(file)
        this.file = file
      } else {
        this.$Notice.warning({
          title: '文件类型错误',
          desc:
            '所选文件‘ ' +
            file.name +
            ' '不是EXCEL文件,请选择后缀为.xlsx或者.xls的EXCEL文件。'
        })
      }
      return false
    },
    // 读取文件
    readFile(file) {
      this.reading = true
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onerror = (e) => {
        this.reading = false
        this.$Message.error('文件读取出错')
      }
      reader.onload = (e) => {
        console.log(e.target.result)
        const data = e.target.result
        const { header, results } = excel.read(data, 'array')
        const tableTitle = header.map((item) => {
          return { title: item, key: item, minWidth: 130, align: 'center' }
        })
        this.importTableData = results
        this.importColumns = tableTitle
        this.reading = false
        this.$Message.success('读取数据成功')
      }
    },
    uploadSucess(response) {
      if (response.code == 200) {
        this.$Message.success('导入成功')
        this.importModalVisible = false
        this.clearImportData()
        this.getDataList()
      } else {
        this.$Message.error(response.message)
      }
      this.uploadfile = {}
    },
    clearImportData() {
      this.importTableData = []
      this.importColumns = []
      this.uploadfile = {}
      this.$refs.upload.clearFiles();
    },

导入模板

iview+vue实现导入EXCEL预览功能_第1张图片

效果预览

iview+vue实现导入EXCEL预览功能_第2张图片

iview+vue实现导入EXCEL预览功能_第3张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号