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

古城微笑少年丶 2021-11-26 14:24 1257阅读 0赞

#  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配置出来的路径名称

## 3、浏览器访问： [http://localhost:8001/][http_localhost_8001] ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]

[http_localhost_8001]: http://localhost:8001/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: /images/20211126/5373dfdf8ed84787be3cca7ff2c773dc.png