axios 提交表单同时下载文件

冷不防 2022-12-11 03:26 147阅读 0赞

### axios 提交表单同时下载文件 ###

*  vue + elementUI + axios 提交表单下载文件

// 下载文件
                download(url, requestData) {
                    this.$axios({
                        method: 'post',
                        url: url,
                        data: this.$qs.stringify(requestData),
                        responseType: 'blob'
                    }).then(response => {
                        var data = response.data;
                        if (!data) {
                            return
                        }
                        var content_disposition = response.headers['content-disposition'];
                        var filename = "file";
                        if (content_disposition.indexOf("filename") > -1) {
                            filename = content_disposition.split("=")[1].trim();
                            filename= decodeURI(escape(filename))
                        }
                        let url = window.URL.createObjectURL(new Blob([data]))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', filename)
                        document.body.appendChild(link)
                        link.click()
                    }).catch((error) => {
                        this.$message.error(error.message);
                    });
                }

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 axios+springboot实现文件上传（文件以及表单）、下载（post/get方式）

目录 * * 简介 * 基础配置： * 一、文件上传 * * 1.单文件上传 * 2.多文件上传 ...

川长思鸟来/ 2024年04月18日 14:14/ 0 赞/ 16 阅读

相关 axios 提交表单同时下载文件

axios 提交表单同时下载文件 vue + elementUI + axios 提交表单下载文件 // 下载文件 dow

冷不防/ 2022年12月11日 03:26/ 0 赞/ 148 阅读

相关 html禁止form表单提交表单提交,onsubmit阻止表单提交

在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。 Bootstrap 实例 - 提交表单验证 //---> function checksubm

骑猪看日落/ 2022年10月07日 11:57/ 0 赞/ 367 阅读

相关 jquery实现同时提交两个form表单

<script type="text/javascript" src="jquery-1.5.1.js"></script> <script type="

曾经终败给现在/ 2022年06月14日 08:18/ 0 赞/ 127 阅读

相关表单提交文件上传

前言表单上传文件是最基本的上传文件方式，虽然现在有很多优秀的上传插件，如：webuploader、uploadify等，但我们还是说一下表单上传。具体内容 1

蔚落/ 2022年06月08日 06:50/ 0 赞/ 373 阅读

相关 vue axios 表单提交上传图片

项目中用的element 的框架，然后在项目有一个添加数据需求是图片可上传，也可不上传，然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的，但接口写的

青旅半醒/ 2022年06月04日 01:57/ 0 赞/ 153 阅读

相关使用表单提交文件

当使用表单中需要上传文件时，即存在type="file" 的Input标签，那么表单就不能使用传统的request方式提交，需要借助第三方工具。比如在tomcat服务器

快来打我*/ 2022年05月23日 08:18/ 0 赞/ 154 阅读

相关文件和普通表单同时提交

JSP页面：send.jsp,页面编码为GBK <body> <%! Date now=new Date(); String form=String.forma

柔光的暖阳◎/ 2022年04月13日 10:28/ 0 赞/ 159 阅读

相关表单提交

form表单提交可以使用以下两种方式 1. input <input class="btn btn-main" type="submit" placeholder

太过爱你忘了你带给我的痛/ 2021年09月28日 22:34/ 0 赞/ 488 阅读

相关 layer提交图片与form表单同时提交数据

> 前端页面 > > <button type="button" name="url" class="layui-btn" id="test1">上传图片</butt

小鱼儿/ 2021年09月26日 08:54/ 0 赞/ 416 阅读