form表单实现下载--vue+axios+element-ui实战

最新推荐文章于 2024-06-24 19:39:11 发布

hxf6060

最新推荐文章于 2024-06-24 19:39:11 发布

阅读量1.6k

点赞数

文章标签： form表单下载 vue

本文链接：https://blog.csdn.net/hxf6060/article/details/97923908

版权

工作中经常会遇到下载文件的需求，前面讲过通过创建a标签下载，今天来讲一下通过form表单直接从后台获取数据下载的实例。

html代码:

<form ref="req_form" method="post" action="">
    <input type="hidden" name="json" ref="req_json" value="" />
</form>
<el-button type="primary" icon="el-icon-download" @click="downOrder()">导出</el-button>

js代码:

methods: {
    downOrder() {
        let form = {};
        Object.assign(form, this.form); //对象属性拷贝到新的对象
        form.limit = 1000;
        var BASE_URL = url; // 下载的地址，请自行拼接
        var jsonstr = JSON.stringify(form);
        this.$refs["req_json"].value = jsonstr;
        this.$refs["req_form"].action = BASE_URL;
        this.$refs["req_form"].submit();
    }
}