利用ajax方式下载文件

2019年7月12日14:28:06 8 1,065 790字阅读2分38秒

最近在做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
微信公众号
博客微信公众号,欢迎关注。
avatar
  • 文本由 发表于 2019年7月12日14:28:06
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :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 萧瑟 Admin @回复

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

        • avatar 绿软吧 @回复 1

          感谢分享

          • avatar @回复 4

            这个可以啊

            • avatar 小王先森 @回复 5

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

                • avatar 萧瑟 Admin @回复

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

                • avatar 心灵博客 @回复 4

                  这个方法不错。

                    • avatar 萧瑟 Admin @回复

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