前端Vue项目实现导入和导出 excel

注：因需求规定，所以这里演示的导入和导出都只是针对excel进行处理。

一、导出（下载）

这里封装了一个方法，每次导出（下载）的时候直接引用即可。

1、方法封装：

// export.js 文件
export function exportExcel (content,fileName1) {
  const blob = new Blob([content],{type:'text/plain'});
  const fileName = fileName1;
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName)
  }else{
    const linkNode = document.createElement('a');
    linkNode.download = fileName; //a标签的download属性规定下载文件的名称
    linkNode.style.display = 'none';
    linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
    document.body.appendChild(linkNode);
    linkNode.click();  //模拟在按钮上的一次鼠标单击
    URL.revokeObjectURL(linkNode.href); // 释放URL 对象
    document.body.removeChild(linkNode);
  }
}

2、导出页面使用：

<el-link @click="Download">下载文件</el-link>

// 引用exportExcel导出方法
import { exportExcel } from '../export.js'

// 导出
Download(){
  // 调用后端接口
   api.rateTemplateResource({fileType:4}).then(res=>{
     exportExcel (res.data, '调价模板.xls')
   })
},

// 接口封装示例
rateTemplateResource: {
	type: 'post',
 	url: host + '/EXP_021',
 	ContentType: 'application/json',
 	'responseType': 'blob',
},

二、导入

<el-button @click="importExcel()" type="primary" >选择文件</el-button>
<input type="file" v-show="false"  @change="takeUpload($event)" ref="takeUpload" accept="/*" /><span>{{fileName}}</span>

 export default{
    data(){
      return{
        fileName:'',
        file:undefined,
      }
    },
    methods:{
      //上传excel
      importExcel(){
        this.$refs.takeUpload.value = ''
        this.$refs.takeUpload.click()
      },
      //上传文件操作
      takeUpload (e) {
        let file = e.target.files[0]
        let fileNameArr = file.name.split('.')
        let forMat = fileNameArr[fileNameArr.length - 1]
        if (!(forMat == 'xls' || forMat == 'xlsx')) {
          this.$message.warning('导入文件只能是 xls、xlsx格式!')
          return
        }
        this.file = file;
        this.fileName = file.name;

        var formData = new FormData()
        formData.append('file', this.file)
        // 接口调用
        api.batchLeadInto(formData).then(res=>{
          if(res.data.HEAD.CODE=='000'){
            if(res.data.BODY.data.length>0){
              let msg=res.data.BODY.data.slice(0,3).join(';')
              this.$message({type: 'error',message:msg})
              this.fileName = ''
            }else{
              this.$message({type: 'success',message:'操作成功'})
              this.fileName = ''
            }
          }
        })
      },
    }
 }

实例图片：