vue+element实现excel中的信息批量导入和导入模板的下载

在页面中，凡有表格的信息，那必定会涉及到表格的批量导入。把一个excel表中的信息导入到页面中，下面有两种方法实现这个功能。

• 第一种是须要后台提供的接口，把参数传给后台，后台返给表中的数据。
• 第二种是纯前端实现表格的批量导入。

感受有用就点个赞吧,给我一波小动力~~~

经过后台的接口实现批量导入

---

一、element实现一个数据导入的按钮

<el-form-item style="float:right;">
        <el-button  size="small" icon="el-icon-download" @click="downLoadExlce">模板下载</el-button>
      <el-upload
                ref="upload"
                :action="uploadUrl"     //上传的地址
                :limit="1"  //最大容许上传个数
                :before-upload="beforeUpload"  //上传文件以前的钩子，参数为上传的文件
                :headers="token"    //设置上传的请求头
                :data = "importData"   //上传时附带的额外参数
                accept=".xls"    //接受上传的文件类型
                class="up-class"
                :on-success="uploadSuccess"   //文件上传成功时的钩子
                :show-file-list="false"  //是否显示已上传文件列表
                :auto-upload="true" //是否在选取文件后当即进行上传
                >
          <el-button slot="trigger" size="small" type="primary" class="el-icon-plus el-icon-upload" >导入数据</el-button>
        </el-upload>
</el-form-item>
复制代码

beforeUpload(file) {
      let extension =file.name.substring(file.name.lastIndexOf('.')+1);
      if(extension  !== 'xls') {
        this.$message({
          message: '上传文件只能是 xls格式!',
          type: 'warning'
        });
        return false;
      }
    },
    uploadSuccess (res ,file,fileList) {
      if (res.code == 200)
      {
        this.$message({
          message: '导入成功!',
          type: 'info'
        });
      }else
      {
        this.$alert(res.message, '导入失败', {
          confirmButtonText: '肯定',
        });
      }
      this.$refs.upload.clearFiles();
    },
复制代码

二、 设置上传的参数、地址和请求头

data(){
     importData: {         //参数
        type : '接口的参数'
      },
     uploadUrl:'',   //地址
     token :{     //请求头
        Authorization:null,
      },
}

mounted(){
    this.uploadUrl ='路径';
    this.token.Authorization = Cookies.get('token');   //从cookie里获取token
}
复制代码

纯前端实现批量导入

---

一、安装XLSX及引用

npm i XLSX -S

import XLSX from 'xlsx'

二、添加表格

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    
    data () {
		return {
			tableData: []
		}
	},
复制代码

三、添加按钮

<el-upload
	       class="upload"
	       action="" //上传路径
	       :multiple="false"    //是否支持多选文件
	       :show-file-list="false"  //是否显示已上传文件列表
	       accept=".xls"    //接受上传的文件类型
	       :http-request="httpRequest" //覆盖默认的上传行为，能够自定义上传的实现
	       >
	       <el-button size="small" type="primary">批量导入</el-button>
	     </el-upload>
复制代码

四、写方法

methods: {
   httpRequest (e) {
	let file = e.file // 文件信息

        if (!file) {   // 没有文件
          return false
        } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
          // 格式根据本身需求定义
          this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
          return false
        }

        const fileReader = new FileReader()
        fileReader.onload = (ev) => {
          try {
            const data = ev.target.result
            const workbook = XLSX.read(data, {
              type: 'binary'  // 以字符编码的方式解析
            })
            const exlname = workbook.SheetNames[0]   // 取第一张表
            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) //生成json表格内容
            // 将 JSON 数据挂到 data 里
            this.tableData = exl
            // document.getElementsByName('file')[0].value = '' 
            // 根据本身需求，可重置上传value为空，容许重复上传同一文件
          } catch (e) {
            console.log('出错了：：')
            return false
          }
	    }
      fileReader.readAsBinaryString(file)
	}
}
</script>
复制代码

导入模板的下载

---

downLoadExlce () {
            let hrefStr = encodeURI('下载路径');
            window.location.href = hrefStr;
        },
复制代码

纯前端实现批量导入参考连接