Vue 下载文件模板

下载文件API部分

/* axios */
import axios from 'axios'

// 下载文件
export function downloadFile(id) {
    let params = {
        //需要传递的参数 例id
        id: id
    }
    return axios({
        method: 'get',
        url: '接口地址',
        params
    })
}

 下载文件vue部分

<el-button @click="download(row)">
    下载
    <i class="el-icon-download" style="margin-left:5px"/>
</el-button>
methods:{
/* 下载 */
        download (row) {
            API.downloadFile(row.id).then(res => {
                let link = document.createElement('a'); //创建a标签
                link.style.display = 'none'; //将a标签隐藏
                //link.href = row.path; //下载单条数据
                link.href = safe + '接口地址' //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
                link.download = this.tableData.name; // 给下载的文件加一个名称
                document.body.appendChild(link); //将创建的a标签加入到body的尾部
                link.click(); //执行a标签
                document.body.removeChild(link); //删除a标签
            })
        },
/* 下载 */
}