El proyecto front-end Vue implementa la importación y exportación de Excel

Nota: Debido a los requisitos, la importación y exportación que se muestran aquí solo se procesan para Excel.

1. Exportar (descargar)

Aquí se encapsula un método al que se puede hacer referencia directamente cada vez que se exporta (descarga).

1. Encapsulación del método:

// 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. Utilice la página de exportación:

<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',
},

2. Importar

<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 = ''
            }
          }
        })
      },
    }
 }

Imágenes de ejemplo: