vue 导出、模板下载、导入三个功能_vue 下载导入模板-CSDN博客

这篇博客介绍了在前端项目中实现Excel文件的导出、模板下载和导入功能的详细步骤。通过使用Element UI组件库，结合axios进行API交互，实现了文件上传、下载和数据转换的操作，确保了文件格式的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目上多次用到了导出、模板下载、导入，简单的记录一下。有可能有的地方不全需要查漏补缺，希望大家评论。

<template>
    <div id="app">
        <div style="padding:5px 0px;margin-right:10px;">
          <el-button icon="el-icon-upload2" size="mini" :loading="loadingexport"  @click="exportContacts()">
            导出
          </el-button>
        </div>
        <div style="padding:5px 0px;margin-right:10px;">
          <el-button size="mini" @click="doDown">
              模板下载
          </el-button>
        </div>
        <div style="padding:5px 0px;margin-right:10px;">
          <el-upload
            class="upload-demo"
            action="#"
            :show-file-list="false"
            :on-change="handleChange"
            accept=".xls,.xlsx"
            :auto-upload="false"
          >
            <el-button icon="el-icon-download" size="mini">导入 Excel</el-button>
          </el-upload>
        </div>
    </div>
</template>
<script>
	import axios from "axios";
    export default {
        data(){
            return {
                // 导入
                disbtn: false,
                fileTemp:[],
                // 导出
                loadingexport:false,
            }
        },
        created:{

        },
        methods: {
            // 下载模板
            doDown(){
                let url = '文件地址'
                window.location.href = url
            },
            // 导入
            handleChange (file, fileList) {
                this.fileTemp = file.raw
                this.doBegin()
            },
            doBegin(){
            if ((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')) {
                this.disbtn = true
                var formdata=new FormData();
                formdata.append('file',this.fileTemp)
                const token = sessionStorage.getItem("token")
                const url1 = "api地址"+token
                axios({
                url:url1,
                method: 'post',
                data: formdata,
                headers:{
                    // 'Content-Type':'multipart/form-data',
                    'Content-Type':'multipart/form-data;boundary='+ new Date().getTime(),
                    token: sessionStorage.getItem("token")
                }
                }).then(res=>{
                    const resData = res.data
                    console.log(resData)
                })
            } else {
                this.$message({
                type: 'warning',
                message: '附件格式错误，请删除后重新上传！'
                })
            }
            },
            // 导出
            exportContacts(){
                this.loadingexport = true
                let formdata=new FormData();
                formdata.append("id", this.id);
                formdata.append("name", this.name);
                const token = sessionStorage.getItem("token")
                const downloadUrl = "api地址" + token
                axios({
                    url: downloadUrl,
                    method: 'post',
                    responseType: 'blob',
                    data: formdata,
                    headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    token: sessionStorage.getItem("token")
                    }
                }).then(
                    response => {
                    	//hasOwnProperty     js判断对象中是否包含此元素
	                    if(response.headers.hasOwnProperty('content-disposition')){
		                    // 根据文件后缀名来映射Blob Type
		                    const fileName = response.headers['content-disposition'].replace('attachment;filename=', '');
		                    this.downFileBlob(decodeURI(fileName), response.data)
		                    this.loadingexport = false
		                  }else{
			                  this.$alert('暂时没有导出文件', {
				                confirmButtonText: '确定'
				              })
		                  }
                    }, err => {
                    this.reject(err)
                    }
                )
            },
            downFileBlob(fileName, fileBlob){
                const blob = new Blob([fileBlob], { type: "application/vnd.ms-excel"});// xls文件
                const elink = document.createElement('a');
                elink.download = decodeURI(fileName.split('=')[1]);
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL对象
                document.body.removeChild(elink);
            },
        },
    }
</script>