vue+element读取excel表+下载+上传

vue+element读取excel表+下载+上传

<template>

  <div>

    <button class="upload" type="primary" @click="btnnClick">下载示列</button>

    <el-upload class="upload-demo" action="https://.....上传接口"

      :on-preview="handlePreview" multiple :limit="1" :on-error="errorfile" :on-change="fileOnChange" :file-list="fileList"

      :on-success="successfiel" :on-exceed="exceed">

      <el-button size="small" type="primary">点击上传</el-button>

    </el-upload>

    <div v-for="(item,index) in  filenamsdf" :key="index">

     <div>{{item}}</div>

    </div>

  </div>

</template>

<script>

import XLSX from "xlsx";

import axios from "axios";

export default {

  name: "HelloWorld",

  props: {

    type: String,

    default: "选择excel文件",

  },

  data() {

    return {

      filenamsdf:[],

      fileList: [],

      exceldata: "",

      name: 0,

      filename:""

    }

  },

  created() { },

  methods: {

    //超出文件个数

    exceed(){

         this.$message({

              message: "只允许单个文件上传，请删除后重试",

              type: "error",

            });

    },

    getsdfaa(outdata) {

      axios({

        method: "post",

        url: "上传地址",

        data: {

          data: JSON.stringify(outdata),

          filename:this.filename

        },

        headers: {

          "Content-Type": "multipart/form-data"

        }

      })

        .then((res) => {

          if (res.data.code == 200) {

         this.fileList=[]

            this.filenamsdf.push(this.filename)

            this.$message({

              message: "导入成功",

              type: "success",

            });

          }else{

              this.fileList=[]

              this.$message({

          message: '文件内容有误',

          type: 'warning'

        })

          }

        })

        .catch((err) => {

       

         });

    },

    fileOnChange(file, fileList) {

      let code=file.response

      let files = { 0: file.raw }

      if(code!==undefined){

        if(code.code==200){

          console.log("sdfsadf")

      this.readExcel1(files)

        }else{

            this.$message({

          message: file.response.msg,

          type: 'warning'

        })

        }

             

      }else{



      }

    },

    readExcel1(files) {//表格导入

      let nmanes = files[0].name

      this.filename=nmanes

      if (/\.(xls|xlsx)$/.test(nmanes) == false) {

        return;

      }

      const fileReader = new FileReader();

      fileReader.onload = (ev) => {

        try {

          const data = ev.target.result;

          const workbook = XLSX.read(data, {

            type: 'binary'

          });

          const wsname1 = workbook.SheetNames[0];//取第一张表

          const ws1 = XLSX.utils.sheet_to_json(workbook.Sheets[wsname1]);//生成第一张表的json表格内容

          this.exceldata = ws1 //表格内容

                this.getsdfaa(this.exceldata)

          try {

          } catch (err) {

            console.log(err)

          }

          this.$refs.upload.value = '';

        } catch (e) {

          return false;

        }

      };

      fileReader.readAsBinaryString(files[0]);

    },

    errorfile(file) {

      console.log(file)

      this.$Message.error('文件上传失败');

    },

    successfiel(res) {



      let name = res.data

      if (/\.(xls|xlsx)$/.test(name) == false) {

        // this.$message({

        //   message: '上传格式不正确，请上传xls或者xlsx格式',

        //   type: 'warning'

        // })

         this.fileList=[]

    }

      //

    },

    submitUpload() {

      this.$refs.upload.submit();

    },

    handleRemove(file, fileList) {

      console.log(file, fileList);

    },

    handlePreview(file) {

      console.log(file);

    },

    btnClick() {

      document.querySelector(".input-file").click();

      let aa = document.querySelector(".input-file")

      console.log(aa)

    },



    btnnClick() {

      // let url = location.host

      location.href = "下载地址"

     

    },

  },

};

</script>

<style scoped>

.upload {

  width: 80px;

  height: 30px;

  text-align: center;

  background-color: #409EFF;

  border: none;

  color: #fff;

  border-radius: 2px;

  position: relative;

  bottom: 20px;

}



.upload-demo {

  display: block;

  width: 200px;

  height: 40px;

  margin: 0 auto;



}



.input-file {

  display: none;

}

</style>

## ```不上传只读取
安装xlsx
npm install xlsx --save
如果版本不兼容，先卸载xlsx//

npm uninstall xlsx
然后安装更低版本的//

npm install xlsx@0.17.0 --save
npm install xlsx@0.16.0 --save
导入xlsx
import XLSX from 'xlsx';
上传文件//
引用element-ui中的upload

<el-upload class="upload-demo" 
	action :limit="1"
	:http-request="getExcel"
	>
     <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
解析Excel
//解析excel   
analysis(file) {
 return new Promise(function (resolve, reject) {
   const reader = new FileReader();
   reader.onload = function (e) {
     const data = e.target.result;
     let datajson = XLSX.read(data, {
       type: "binary"
     });
     const result = [];
     datajson.SheetNames.forEach(sheetName => {
       result.push({
         sheetName: sheetName,
         sheet: XLSX.utils.sheet_to_json(datajson.Sheets[sheetName])
       });
     });
     resolve(result);
   };
   reader.readAsBinaryString(file.file);
 });
},
导入文件
// 导入文件
getExcel(file) {
 const types = file.file.name.split(".")[1]; //获取文件后缀
 const fileType = ["xlsx","xls"].some(
   item => item === types
 );
 if (!fileType) {
   this.$message("格式错误！请重新选择");
   return;
 }
 this.analysis(file).then(tableJson => {
   if (tableJson && tableJson.length > 0) {
     //成功解析出数据
     let dataExcel = tableJson[0];
     console.log("数据",dataExcel);
     console.log(JSON.stringify(dataExcel.sheet));
   }
 });
},