Descargue archivos de acuerdo con el formato de archivo (secuencia de archivos) devuelto por el backend

Oye, oye, estoy aquí de nuevo. Hoy, el tema que estamos discutiendo es la descarga de archivos. Los requisitos actuales son los siguientes: el front-end escribe una página de carga de archivos, establece un botón de carga y, después de abrir, usa el componente el-upload para cargar el archivo de Excel. Después de que el backend recibe el archivo, también devuelve un flujo de archivos al frontend.

No hablaré sobre cómo hacer el backend específicamente, solo hablemos sobre qué operaciones debe hacer el frontend. Usamos vue scaffolding y escribimos el código html en la plantilla de la siguiente manera:

<template>
	<div class="box">
		<el-card style="width:80%" class="header-card">
			<template #header>
				<h3>上传文件</h3>
			</template>
            <el-button size="mini" @click="openUpload" type="success" icon="el-icon-upload">点击上传</el-button>
		</el-card>
		<el-dialog
			:visible.sync="importDialog"
			width="1200px"
			:close-on-click-modal="false"
			center
            destroy-on-close
		>
			<div style="text-align: left" slot="title">index上传</div>
			<el-upload
				drag
				v-loading="importLoading"
				action
				:before-upload="beforeSampleImportUpload"
				:http-request="handleSampleImportUploading"
			>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">请上传excel文件!</div>
			</el-upload>
		</el-dialog>
	</div>
</template>

Y configurar el estilo:

<style lang="scss" scoped>
.box{
    //背景占满全屏
    min-height: 100%;
    background-image: url(../assets/bg0.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    //卡片内容水平垂直居中
    display: flex;
    justify-content: center;
    align-items: center;
}
:deep(.el-upload--text) {
  width: 100% !important;
}
:deep(.el-upload-dragger) {
  width: 100% !important;
}
.el-upload:before {
  content: "";
}
.header-card{
    margin: 0 0.5rem 0;
}
:deep(.el-card__body){
    min-height: 150px;
}
</style>

Ahora, la página web resultante es la siguiente:

 A continuación se muestra el código js:

<script>
//引入axios，也可以通过拦截器interceptors进行封装
import axios from 'axios'
//引入vuex里的数据（这里专门存的baseurl地址，如果封装了axios，就不需要这一步，这里讲最基础的做法）
import { mapState } from 'vuex';
export default {
    data() {
        return {
            //对话框的显示
            importDialog: false,
            //对话框的loading
            importLoading: false
        };
    },
    methods: {
        //在实例文件导入前做的事
        beforeSampleImportUpload(file) {
            //声明变量，判断是否是Excel文件
            const isExcel =
                file.type ===
                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || "application/vnd.ms-excel";
            //如果不是的话，就不允许上传，并提示信息
            if (!isExcel) {
                this.$message({
                    message: "上传失败，只接受excel文件!",
                    type: "warning",
                    showClose: true,
                });
                return false;
            }
            return true;
        },
        //在实例文件导入的过程中（调接口）
        handleSampleImportUploading(item) {
            let formdata = new FormData();
            //file字段就是后端接收的字段，值为item.file
            formdata.append("file", item.file);
            //开始显示加载中
            this.importLoading = true;
            //调接口
            axios({
                method: 'post',
                url: this.globalBaseUrl + '/xxx', //这里填写url
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                data: formdata
            }).then(res=>{
                 //（文件流）
                //设置后缀，根据type设置相应的后缀名称(".xls"/".xlsx")
                let suffix;
                if(res.data && res.data.type=="application/vnd.ms-excel"){
                    suffix = ".xls"
                }else if(res.data && res.data.type=="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){
                    suffix = ".xlsx"
                }
                let url = window.URL.createObjectURL(new Blob([res.data], { type: suffix }));
                //弄出一个a标签，隐藏起来，点击后下载文件并移除这个anchor的html标签
                let a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.setAttribute('download', `1${suffix}`);
                document.body.appendChild(a);
                a.click();
                url = window.URL.revokeObjectURL(url);  //释放内存
                document.body.removeChild(a)
            }).catch(()=>{
                this.$notify({
                    title:"上传失败",
                    type:"error",
                    duration:3500,
                    showClose:true
                })
            }).finally(()=>{
                //关闭加载和对话框
                this.importLoading = false;
                this.importDialog = false;
            })
        },
        openUpload(){
            //打开对话框
            this.importDialog = true
        }
    },
    computed: {
        ...mapState(["globalBaseUrl"])
    },
};
</script>

Si ese es el caso, está hecho. El archivo se descargará directamente. No copie el código directamente de principio a fin, pero opere de acuerdo con las necesidades reales de la aplicación.