vue+element excel文件的导入和导出

导入和模板下载excel文件 页面

1:excel文件的导出原理：就是后端给前端返回一个URL地址，前端打开这个地址就可以了。

window.location.href = url (后端返回的url)

2: excel文件的导入 html部分和js部分 配合element的组件

// html   引用element里面的组件

                  class='image-uploader'

                  :multiple='false'

                  :auto-upload='true'

                  list-type='text'

                  :show-file-list='false'

                  :before-upload="beforeUpload"

                  action=''

                  :on-exceed="handleExceed"

                  :http-request="uploadFile" >

                  导入

               

// Js部分  文件上传前的判断和数量 上传文件之前的钩子   

    beforeUpload(file) {

      this.uploadLoading = true

      //判断文件格式

      const isText = file.type === 'application/vnd.ms-excel'

      const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

      if (!(isText||isTextComputer)) {

        this.openMessage('数据导入必须为excel文件xls或者xlsx格式','error')

        this.uploadLoading =false

        return false;

      }

    },

    // 上传文件个数超过定义的数量

    handleExceed(files, fileList) {

      this.$message.warning(`当前限制选择 1 个文件`);

    },

//Js  最重要部分 上传文件，处理文件上传代码

    uploadFile(item) {

      console.log(item);

      const fileObj = item.file;

      // FormData 对象

      const form = new FormData();

      // 文件对象 这里像后端传参数，file是上传文件，其它是其它参数

      form.append("file", fileObj);

      form.append("importType", this.formData.importType);

      form.append("importUserId", this.$store.getters.userId);

      form.append("importUserName",this.$store.getters.name);

      console.log(JSON.stringify(form));

      // let formTwo = JSON.stringify(form)

      importExcelAPI(form).then(response => {

        this.openMessage("文件：" + fileObj.name + "导入成功",'success')

        this.uploadLoading =false

        this.getTableList()

      }).catch(e=>{  this.uploadLoading =false });

    },