引子 在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式: 借助a标签,<a href="学习资料.xlsx"></a> window.location = '学习资料.xlsx' 借助浏览器插件,如flash等(没考证过) 除了第三外,前两种方法有个缺点,就是无法知道下载是否完成,因为浏览器没有给出相关的事件.但是,自从有了Blob,fetch, xhr2这些好用的API之后,ajax下载文件(小文件)就变得可行了,核心原因就在于Blob和Array…

问题表现 Ajax 下载文件成功后,打开提示格式损坏,源代码如下: axios({ method: 'get', url: "/public/工作簿1.xlsx", // 静态资源地址 }).then(res => { const href = document.querySelector('.href') let blob = new Blob([res.data], { type: 'application/octet-stream'}) href.href = URL.cr…

说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据查询到的数据生成一个数据文件,返回前台一个json对象(可放置生成成功标记,文件路径等信息). ajax success回调函数部分,根据返回的json对象,调用手写的js下载文件的方法,实现页面无刷新下载文件. 贴上部分代码供参考: js代码: 1. js写一个动态创建并提交form表单的方法,依…

传统上,客户端将依靠浏览器来处理从服务器下载文件.然而,这种方法需要打开一个新的浏览器窗口,iframe或任何其他类型的不友好和黑客行为.为下载请求添加额外的头信息也很困难.更好的解决方案是使用HTML5 File API以及XMLHttpRequest或请求库. File API允许您在浏览器中创建,加载和操作文件.我们可以使用a Blob 创建一个内存文件: const blob = new Blob(['lorem ipsum'],{type:'text / plain'}); 通过一些额…

可能大家都觉得没有必要用ajax来下载东西,用window.open(url)就可以搞定 但是这有一个问题,就是这就限定了只能用GET方式来请求了: 可能你又会说GET很符合REST的要求呀. 但是如果你用jwt来做身份验证呢? 这意味着你需要在Window.open时带上自定义的Request Header,这就无解了 所以今天来介绍一下怎么用ajax来下载文件 let xhr = new XMLHttpRequest() xhr.open('GET', 'http://www.xxx.com…

之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看--跑偏了(⊙o⊙)-,我的意思就是用框架实现比较简单,但是如果用jQuery的话,对原理可能会更了解一些,有需要的一起看下吧~ 1. multipart/form-data 因为HTTP提供的是基于文本的通信协议,而上传文件传输的是二进制数据,所以需要使用multipart/form-data编码格式,其HTTP消息体格式如下: ------WebKitFor…

原本现在文件直接通过超链接可以完成下载,但现在要在url中附带几个参数,并且这些参数要是点击事件触发时的最新值,所以这里使用ajax的方式进行下载 然而: 1.使用ajax,ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的发送,接受都只能是string字符串,不能流类型,所以无法实现文件下载,强用会出现response冲突. 如果非要使用ajax的话,只能通过返回值得到生成的文件相关url.然后在回调函数里通过创建一个iframe,并设置其src值为文件url…

View Html.DevExpress().Button(DevExpressButtonHelper.AddButton(ViewBag.Form, "Export", "Export", 70, false)).GetHtml(); Javascript 调用StoreLocalViewData controller的方法主要是用来把传入export的参数, 然后使用(ViewDataDictionary)LocalViewData 存储. var url =…

得到所有Post数据: var postData=Request.Form.ToString() 构建JS代码 // Ajax 文件下载jQuery.download = function(url, data, method){ // 获得url和data if( url && data ){ // data 是 string 或者 array/object data = typeof data == 'string' ? data : jQuery.param(data); // 把参数…

在web项目中需要下载文件,由于传递的参数比较多(通过参数在服务器端动态下载指定文件),所以希望使用post方式传递参数.通常,在web前端需要下载文件,都是通过指定<a>标签的href属性,访问服务器端url即可下载并保存文件到本地.但是这种方式使用的是HTTP GET方法,参数只能通过URL参数方式传递,无法使用POST方式传递参数.于是,想到使用ajax方式下载文件. 实验:ajax方式下载文件时无法触发浏览器打开保存文件对话框,也就无法将下载的文件保存到硬盘上!原因:ajax方式请求的…

原因:ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,ajax没法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件. 解决方法:使用form表单提交实现文件下载 1,后台代码实现方法: // 生成excel文件 @RequestMapping(value = "/study", method = RequestMethod.POST) public void study(@RequestBody ParamVO…

最近在做网站的时候遇到这样一个功能,在如图所示的页面中,需要用户点击链接的时候,能够以异步Ajax的方式判断服务器中是否存储有相应的Excel文件,如果没有的话就提示用户没有找到,如果有的话就下载到用户本地. ​ 当然,这是很简单的一个问题,按照一般方式编写Ajax就可以了.但是当服务器端把文件内容以二进制的形式返回到浏览器端,浏览器的Ajax却抛出了错误.大致是ParseError, Invalid XML PK一类的错误信息. ​ 造成这个问题的原因,并不是服务器端代码或者javascrip…

原因: Ajax下载文件的这种方式本来就是禁止的.出于安全因素的考虑,javascript是不能够保存文件到本地的, 所以ajax考虑到了这点,只是接受json,text,html,xml格式的返回值,二进制的返回格式就会抛出这个异常. 因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png.文件下载等, 然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的. 文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取…

down.php <?php $file = "avater.jpg"; //计算机上的一个文件 $fileName = basename($file); //获取文件名 header("Content-Type:application/octet-stream"); //告诉浏览器文档类型(mime类型); octet-stream指的是二进制文件类型;下载任何类型的文件都可以这么指定 header("Content-Disposition:att…

项目中碰到的问题,记录如下. 需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2…

<!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"> <property name="supportedMediaTypes"> <l…

<?xml version="1.0" encoding="UTF-8"?> <!-- SpringMVC配置文件 --> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:p="http://www.springframework.org/schema/p" xmlns:xsi="http://www.w3…

由于想要实现下载的文件可以进行选择,而不是通过<a>标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载(这样的话ajax可以传递不同的参数),但是ajax实现的文件下载并不能触发浏览器的下载文件弹出框,这里通过模拟表单提交实现同样的效果. 1.html代码: <a class="mini-button" iconCls="icon-edit" onclick="output()">导出</a…

最近在做文件下载,后台写了个控制层,直接走进去应该就可以下载文件,各种文件图片,excel等 但是起初老是下载失败,并且弹出下面的乱码: 前台请求代码: $('#fileexcel').unbind('click').bind('click',function(){ alert("我要下载了"); $.ajax({ type:'post', url:'media', data:null, async:true, success : function(msg){ alert(msg);…

ajax 下载不太现实第一,http 不支持直接的二进制传输,二进制数据需要编码 例如base64 ,这点服务器端可以实现第二,客户端获得编码后的文件要转换,js应该也可以第三点,最为致命,js无法操作客户端的文件系统,必须通过组件,例如fso,但是在ff上不兼容…

Html中的代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="Contents/JS…

ajax是不能直接下载文件的,所以一般都是通过一个超链接的形式去下载一个文件 但是当牵扯到需要发送很多数据到服务器上再下载的时候超链接的形式就有些不好看了, /*===================下载文件 * options:{ * url:'', //下载地址 * data:{name:value}, //要发送的数据 * method:'post' * } */ var DownLoadFile = function (options) { var config = $.extend(t…

需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下载10G的文件. PC端全平台支持.Windows,macOS,Linux 全浏览器支持.ie6,ie7,ie8,ie9,ie10,ie11,edge,firefox,chrome,safari 这篇文章主要介绍了SpringMVC+Ajax实现文件批量上传和下载功能实例代码,代码分为上传form和…

JQuery的ajax函数的返回类型只有xml.text.json.html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载.但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据.在实现过程中,页面也没有进行刷新. var form=$("<form>");//定义一个form表单form.attr("style","display:none");form.attr(…

用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个php文件夹上传下载的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助.此控件PC全平台支持包括mac,linux系统的文件上传,文章末尾将附上控件下载与教程链接 功能介绍: 树形目录导航.您可以通过树型目录导航和路径导航栏快速跳转到指定目录.在跳转后树型目录将会自动选中当前的目录. 路径导航,点击根目录按钮便可返根目录 文件和目录重命名 点击删除按钮 点击确定后,页面中的文件消失       批量上传文…

最近项目需要做一个下载文件的进度条,看网上上传文件进度条下载,特分享出来方便大家查阅 <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>下载进度条</title> </head> <style type="text/css">     .containerBar{         wid…

不推荐使用的FileReader 之前用FileReader读取下载文件,当文件超过1M浏览器就立即扑街了 // 文件下载 function download(blob, fileName) { var reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = function (e) { //创建a标签,构造下载弹窗 var a = document.createElement("a"); a.id…

有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 font-awesome 上面的.使用时, 首先将 font-awesome 整个文件夹下载下来,利用bower或者是自己去官网上面下载都行. 将整个文件夹放在项目文件中之后,在页面上面引入css文件 <link href="libs/font-awesome-4.7.0/css/font-a…

FileHandler http://www.cnblogs.com/vipsoft/p/3627709.html UpdatePanel无法导出下载文件: http://www.cnblogs.com/vipsoft/p/3298299.html //相对路径下载.path: ~/DownLoad/ //<add key="DownLoadPath" value="~/DownLoad/"/> public static bool DownLoadFi…

在C#当中,利用WebClient这个核心类,可以轻易的打造一个下载器.但是这里想要强调的是,我们用的是异步操作.所谓异步,是相对于同步的概念而言的.比如Web中的Ajax就是基于异步的.它能够提供良好的用户体验,让用户在进行操作时,不感觉到“卡”(不阻塞UI线程),能够同时进行其它的操作并能够随意的切换到任务界面.在下载文件时,如果文件过大,我们用同步的下载方式进行下载会感觉程序“假死”,其实程序在后台不断的运行,但我们看不到下载的过程.所以这时候使用异步方法能够有效的解决这个问题. 先看一下…