Ajax方式实现文件下载失败

背景:实现文件下载导出

问题描述

前端发送ajax【get/post】请求,后端生成excel文件,最后用response输出文件流,没有报错也没有文件下载提示。

遇到过这个问题的还是不少,问题出在ajax本身,解决方法和原因也都找到。

原因:文件的下载是以二进制形式进行的,ajax无法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件

  ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的,ajax没法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件。
   ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的接收类型只能是string字符串,不是流类型,所以无法实现文件下载。但用ajax仍然可以获得文件的内容,该文件将被保留在内存中,无法将文件保存到磁盘。 这是因为JavaScript无法和磁盘进行交互,否则这会是一个严重的安全问题,js无法调用到浏览器的下载处理机制和程序,会被浏览器阻塞。

解决方式

  • 隐藏表单,用提交表单的形式
  • 用window.open() 或 window.location.href()
  • 创建iframe,iframe的src可以是文件地址url来直接下载文件

1)使用window.location.href=dataUrl;就可以实现。

window.location.href=basePath+‘invoiceFormBillAttachAction/downloadAttaches.do?ID=‘+ID+‘&REMARK=‘+REMARK;

2) 使用隐藏iframe实现无刷新下载文件

      <a href="#" onclick="downloadFile()">download</a>
      <iframe id="ifile" style="display:none"></iframe>
      function downloadFile(){
        var dom=document.getElementById(‘ifile‘);
        dom.src="http:xxxx.com";
     }

3) 分装form表单请求

download() {
          if (this.cloudDiskIds.length == 0) {
              alert ("请选择要下载的文件!")
              return
          }
          if (this.cloudDiskIds.length > 1) {
              alert ("只能选择一个文件!")
              return
          }
          // this.formData.fileName = this.cloudDiskList[0].fileName;
          // this.formData.filePath = this.cloudDiskList[0].filePath;
          // alert (this.cloudDiskIds[0])
          // 请求地址
          var url = "http://localhost:8080/wingCloud/customer/download";
          // 分装form表单
          var form = $("<form></form>").attr("action", url).attr("method", "post");
          // 封装参数
          form.append($("<input></input>").attr("type", "hidden").attr("name", "id").attr("value", this.cloudDiskIds[0]));
          // form.append($("<input></input>").attr("type", "hidden").attr("name", "filePath").attr("value", this.formData.filePath));
          // 提交
          form.appendTo(‘body‘).submit().remove();
      }

原文地址:https://www.cnblogs.com/Steven5007/p/10923537.html

时间: 2024-10-26 12:29:52

Ajax方式实现文件下载失败的相关文章

通过jQuery或ScriptManager以Ajax方式访问服务

1.客户端和服务端 服务端对外提供服务时,可以通过handler或者webservice.handler比较轻便,但是难以对外公开,只有程序员自己知道它到底做了些什么工作.webservice可以将服务对外公开,调用也方便,更加专业些.如果不是要公开的接口,handler完全可以胜任了.下面是将webservice发布的效果. 客户端在调用服务端的服务时,最简单的莫过于使用jQuery了.当然微软也提供了ScriptMananger来访问WebService.他们之间的关系可以用下图说明. 2.

多种方式实现文件下载功能

(1)使用 NSURLConnection 直接方式 (2)使用 NSURLConnection 代理方式 (3)使用 NSURLSession 直接方式 (4)使用 NSURLSession 代理方式 (5)使用 AFNetworking 方式 附加功能: 使用 AFNetworking 中的 AFNetworkReachabilityManager 相关操作来检查网络情况: AFNetworkReachabilityStatusReachableViaWiFi:Wi-Fi 网络下 AFNet

form表单提交转为ajax方式提交

在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法. 原先的form表单长这样: <form action="xxx" method="get"> //action的值是请求的url地址 <div class="form-group"> <label for="name">姓名</label> <

通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: 1 2 3 4 5 6 7 8 9 <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">       <h1 >测试通过Rest接口上传文件 </h1&g

springmvc,通过ajax方式提交页面数据,后台返回json数据中文信息乱码

本人刚开始接触springmvc,项目搭建参照https://my.oschina.net/gaussik/blog/385697.在用IDEA写登录注册的时候,想通过ajax方式提交数据到后台,然后遇到如题所述的乱码问题,然后度娘了好多,终于解决了.废话不多说,直接上代码. 首先是登录页面login.jsp 1 <%-- 2 Created by IntelliJ IDEA. 3 User: PENG027 4 Date: 2016/11/11 5 Time: 15:48 6 To chang

jquery 读取页面表格中的数据 生成批量insert代码 并以ajax方式传给后台

表格的格式较为常规,首行为字段,以下各行为数据,表格的id为detailList . $("#submitExcel").click(function(){ //绑定单击事件 insertStr="insert into funddetail values"; // insert字符串的初始值 $("#detailList tr:gt(0)").each(function(i){ //获取表格除首行外的所有行,并给每一行添加方法 insertSt

[实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录

写在前面 今天回来的比较早,就趁着有空,把登录的代码更新一下.上篇文章实现了ajax的注册,这篇将实现登录,实现目标,ajax登录方式,如果勾选记住我,则下次不再输入用户名密码,直接跳转到网盘界面. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册 [实战]MVC5+EF6+MySql企业网盘实战(3)——验证码 [实战]MVC5+EF6+MySql

jquery.validate ajax方式验证

在做网站的时候有一块需要用到jquery.validate插件 ajax方式的方式来验证原始密码是否正确,研究了研究加上博客园朋友的帮助,终于实现了.贴出代码 <script type="text/javascript">    $(function () {        $("#form1").validate({            rules: {                pwd: {                    require

关于后台数据库正常存储中文通过Ajax方式传递到前台变成问号的处理

我的一个程序,用到的后台数据库MySql,字段是Varchar,Character Set是utf8,字段能且已经正确存储了中文. 从数据库取出信息后,在后台Java代码里Debug看到正确的中文. 但是,通过Ajax方式将信息传到前台,前台显示??,用alert查看也是两个问号. 看页面编码方式,<%@ page contentType="text/html; charset=UTF-8"%> 和<meta charset="utf-8"/>