VUE 使用a标签 POST 通过文件路径 实现下载功能

 vue Element UI 前端使用

                                     a标签 post 通过文件路径 实现下载功能

1、定义按钮

 <!-- 下载文件 -->
    <el-card style="height:350px;overflow-y:auto;">
        <div> 
            <el-form>
                <el-form-item>

              <!-- 在这按钮上 调用下载函数 -->
                    <el-button size="small" type="primary" plain @click="downloadFile">确认下载</el-button>

                </el-form-item>
            </el-form>
        </div>
    </el-card>

2、实现a标签下载 函数

//下载文件
    downloadFile(){
        let url = `${fss}/dcb/getExcel`;
        let data = {
                    bmid : this.userInfo.deptId,
                    bmmc : this.userInfo.dept,
                    addStatisticalType : JSON.stringify(this.addStatisticalType),
                    reduceStatisticalType : JSON.stringify(this.reduceStatisticalType),
        };
        this.$post(url,data).then(retData => {
            let fileName = retData.returnData;    //下载文件名
            let a = document.createElement("a");
            a.download = fileName;
            a.style.display = "none";
            a.href = `${assetStatistics}/assetStatistics/`+fileName;    
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(a.href);    // 释放URL 对象
            document.body.removeChild(a);   // 删除 a 标签
        })
    },

注： 

         ${assetStatistics} 地址：是项目所在的服务器地址

          /assetStatistics 是在服务器上的tomcat中conf下的service.xml配置出来的路径名称

<Context path="/assetStatistics" docBase="/gxcc/oaData/assetModel/assetStatistics" debug="0" reladable="true" ></Context>

3、浏览器访问： http://localhost:8001/