利用ajax方式下载文件

2019年7月12日14:28:06 8 149
华为云学生机

最近在做web项目中需要导出Excel,由于传递的参数比较多(通过参数在服务器端动态生成Excel),所以希望使用post方式传递参数。通常,在web前端需要下载文件,都是通过指定<a>标签的href属性,访问服务器端url即可下载并保存文件到本地。但是这种方式使用的是HTTP GET方法,参数只能通过URL参数方式传递,无法使用POST方式传递参数。于是,想到使用ajax方式下载文件。

实验:ajax方式下载文件时无法触发浏览器打开保存文件对话框,也就无法将下载的文件保存到硬盘上!
原因:ajax方式请求的数据只能存放在javascipt内存空间,可以通过javascript访问,但是无法保存到硬盘,因为javascript不能直接和硬盘交互,否则将是一个安全问题。

那么,如果想实现post方式提交参数下载文件,应该怎么实现呢?可以通过模拟表单提交的方式实现post传递数据。

  1. function downloadFileByForm(data) {
  2.     //此处data是需要传递的数据
  3.     var url = "../Project/OutboundOrderExcel"//提交数据和下载地址
  4.     var form = $("<form></form>").attr("action", url).attr("method""post");
  5.     //将数据赋值给Input进行form表单提交数据
  6.     form.append($("<input></input>").attr("type""hidden").attr("name""queryJson").attr("value", data));
  7.     form.appendTo('body').submit().remove(); //模拟提交
  8. }

这样就可以实现post提交数据进行下载文件。

weinxin
微信公众号
博客微信公众号,欢迎关注。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:8   其中:访客  5   博主  3

    • avatar 石樱灯笼 0

      你的ajax下载实验不成功,大概是因为你没有使用 ArrayBuffer

        • avatar 萧瑟  博主

          @石樱灯笼 多谢大佬提醒,有空我研究研究这个。

        • avatar 绿软吧 1

          感谢分享

          • avatar 3

            这个可以啊

            • avatar 小王先森 5

              什么时候我也会用到这个。。。

                • avatar 萧瑟  博主

                  @小王先森 以后遇到了肯定能用上。

                • avatar 心灵博客 4

                  这个方法不错。

                    • avatar 萧瑟  博主

                      @心灵博客 对,get请求在地址栏太长了,post方便一些。