vue2 ant design vue项目中上传和导入excel文件

vue2 ant design vue项目中上传和导入excel文件

下载excel文件

代码

// template中
<template>
	// 导出文件封装的按钮
	<x-down v-if="hasPerm('sysUser:export')" ref="batchExport" @batchExport="batchExport" />
</template>

// script中
<script>
import { sysUserExport } from '@/api/modular/system/userManage'

export default {
	methods: {
		batchExport() {
	      sysUserExport().then((res) => {
	        this.$refs.batchExport.downloadfile(res)
	      })
	    },
	}
}
</script>

@/api/modular/system/userManage.js文件

export function sysUserExport (parameter) {
  return axios({
    url: '/main/sysUser/export',
    method: 'get',
    params: parameter,
    responseType: 'blob'
  })
}

x-down组件

<template>
  <a-tooltip placement="top">
    <template slot="title">
      <span>导出所有数据</span>
    </template>
    <!-- 正常来说，这里加个插槽最好了，但是这个就是为导出准备的，一般这两个字不会变 -->
    <a-button type="dashed" @click="batchExport" :loading="batchExportLoading"><a-icon type="export"/>导出</a-button>
  </a-tooltip>
</template>

<script>
export default {
  name: 'XDown',
  data () {
    return {
      batchExportLoading: false
    }
  },
  methods: {
    /**
     * 本控件中点击按钮事件
     */
    batchExport () {
      this.batchExportLoading = true
      // 将其传达到上个界面
      this.$emit('batchExport', '')
    },

    /**
     * 通过返回的元素通过浏览器下载
     * 也就是接受使用这个组件的地方吧下载的内容传过来，
     * 但是这个组件本公子编写的时候只想的适用于导出excel来使用，下载文件呀图片方面的重新整个组件即可
     */
    downloadfile (res) {
      this.batchExportLoading = false
      var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
      var contentDisposition = res.headers['content-disposition']
      var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
      var result = patt.exec(contentDisposition)
      var filename = result[1]
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob) // 创建下载的链接
      var reg = /^["](.*)["]$/g
      downloadElement.style.display = 'none'
      downloadElement.href = href
      downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href)
    }
  }
}
</script>

sysUserExport函数

import { axios } from '@/utils/request'
export function sysUserExport(parameter) {
	return axios({
		url: '根据情况写',
		methods: 'get',
		params: parameter,
		responseType: 'blob'
	}) 
}

导入excel文件

<template>
	<a-button v-if="hasPerm('sysUser:import')" icon="import" type="dashed" @click="importUserExcel">
      导入
    </a-button>
     <input
	     type="file"
	     id="uploadUserExcel"
	     ref="uploadUserExcel"
	     v-show="false"
	     accept=".xls, .xlsx, .excel"
	     @input="readUserExcel"
    />
</template>


<script>
export default {
	methods: {
		importUserExcel() {
	      let userInfo = JSON.parse(localStorage.getItem('userInfo'))
	      this.$refs.uploadUserExcel.click(); // 浏览文件
	      return
	    },
	    readUserExcel(event) {
	      if (event.target.files.length != 0) {
	        let fileList = event.target.files;
	        this.excelPersonName = fileList[0].name;
	        this.excelUserFile = this.$refs.uploadUserExcel.files[0];
	        this.gmDrUserSure();
	      }
	    },
	    //发送请求
	    gmDrUserSure() {
	      // this.uploadDialog = false;
	      let formData = new FormData();
	      formData.append("file", this.excelUserFile);
	      if (this.excelName === "") {
	        this.$message({
	          type: "warning",
	          message: "请选择excel文件！",
	          duration: 2 * 1000,
	        });
	        return;
	      }
	      //上传excel
	
	      exportUser(formData).then(res => {
	        if(res.code == 200) {
	          this.$message.success('导入成功！')
	          this.$refs.table.refresh()
	        } else {
	          this.$message.warning('导入失败：', res.messgae)
	        }
	      })
	    },
	}
}
</script>