首页 > 其他 > 详细

post方式实现导出/下载文件

时间:2021-09-06 02:29:26      阅读:16      评论:0      收藏:0      [点我收藏+]
let url =  xxxx.action?a=xx&b=yy;
 window.location.href = url;
 // 或者
 window.open(url, ‘_self‘)

弊端:当请求参数较多时,get的方式无法使用,这时候需要考虑post的方式,但是直接通过ajax的post的方式无法调用浏览器的下载功能

post的下载方式

原理: 创建一个隐藏form表单,通过form表单的提交刷新功能,实现下载。代码如下:

技术分享图片
// vue项目代码
  // 导出excel
    postExcelFile(params, url) {
      //params是post请求需要的参数,url是请求url地址
      var form = document.createElement("form");
      form.style.display = "none";
      form.action = url;
      form.method = "post";
      document.body.appendChild(form);
    // 动态创建input并给value赋值
      for (var key in params) {
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = params[key];
        form.appendChild(input);
      }

      form.submit();
      form.remove();
    }

    //调用
     this.postExcelFile(
        { currentPage: 2, pageSize: 20 },
        ‘url/xxxxxxx/‘
      );
技术分享图片

注意点:传给后端的参数不是json对象的形式,而是 currentPage=2&pageSize=20, 因此需要后端兄弟的配合

post方式实现导出/下载文件

原文:https://www.cnblogs.com/baixiaozhu/p/15229412.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!