JQuery 实现文件下载的常用方法分析

本文实例讲述了JQuery 实现文件下载的常用方法。分享给大家供大家参考，具体如下：

GET方式

window.location.href = url;

POST方式

var url = "下载接口地址";
// 构造隐藏的form表单
var $form = $("<form id='download' class='hidden' method='post'></form>");
$form.attr("url",url);
$(body).append($form);
// 添加提交参数
var $input1 = $("<input name='param1' type='text'></input>");
$input1.attr("value","参数值1");
$("#download").append($input1);
var $input2 = $("<input name='param2' type='text'></input>");
$input1.attr("value","参数值2");
$("#download").append($input2);
// 提交表单
$form.submit();

ajax为什么不能下载文件

ajax支持的服务器返回数据类型有：xml、json、script、html，其他类型(例如二进制流)将被作为String返回，无法触发浏览器的下载处理机制和程序。

// ajax将返回数据转换为string，再利用该string创建Blob对象，下载的文件无法正确打开，数据可能已经被破坏
var blob = new Blob([data]);
//对于Blob对象，我们可以创建出一个URL来访问它。使用URL对象的createObjectURL方法。
var a = document.createElement('a');
a.download = 'data.doc';
a.href=window.URL.createObjectURL(blob);
a.click()

HTML5 Blob对象

一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。Blob对象可以看做是存放二进制数据的容器。

创建Blob对象

var blob = new Blob(dataArr:Array<any>, opt:{type:string,endings:string});

dataArr：数组，包含了要添加到Blob对象中的数据。数据可以是任意多个ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
opt：对象，包含两个属性
- type：用于设置Blob对象的属性（如：MIME类型）
- endings ：(已废弃)，设置BlobBuilder.append() 方法的endings参数，取值"transparent"或"native"

// 例如创建一个装填DOMString对象的Blob对象
var data='<b style="font-size:32px;color:red;">Blob</b>';
var blob=new Blob([data],{"type":"text/html"});
console.log(blob);

xmlhttprequest 2 + Blob 实现文件下载

xmlhttprequest 2 标准支持流文件，使用 xhr.response作为返回(不是responseText)

var url = "";
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);//get请求，请求地址，是否异步
xhr.responseType = "blob";  // 返回类型blob
xhr.onload = function () {// 请求完成处理函数if (this.status === 200) {var blob = this.response;// 获取返回值var a = document.createElement('a');a.download = 'data.doc';a.href=window.URL.createObjectURL(blob);a.click();}
};
// 发送ajax请求
xhr.send();

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

转载于：http://www.45fan.com/article.php?aid=19102932571227509325200883

JQuery 实现文件下载的常用方法分析相关推荐

python try-except处理异常的常用方法分析
python try-except处理异常的常用方法分析参考文章: (1)python try-except处理异常的常用方法分析 (2)https://www.cnblogs.com/silenc ...
RxDownload2 文件下载太慢分析
项目经验,如需转载,请注明作者:Yuloran (t.cn/EGU6c76) 前言这个 bug 本不应该定位这么久,只是最近状态实在是太差了,无论是心理上还是身体上,都感觉非常的疲惫. Bug 现象 ...
Javascript笔记：（实践篇）从jQuery插件技术说起-分析extend方法的源码（发现extend方法里有bug）（下篇）...
1.1 分析$.extend源码在分析源码之前,我还要加一段s测试代码,代码如下: <script type="text/javascript"> $(doc ...
jquery常用技巧及常用方法列表
jquery常用技巧及常用方法列表 1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquer ...
Javascript语言精粹之Array常用方法分析
Javascript语言精粹之Array常用方法分析 1.Array常用方法分析 1.1 Array.prototype.sort() Javascript的默认比较函数假定被排序元素都是字符串,所以 ...
JQuery - Sizzle选择器引擎原理分析
说明:14年学习的jquery源码,搬到这里供大家交流.原文地址:https://segmentfault.com/a/1190000003933990 一.前言 Sizzle原来是jQuery里面的 ...
基于jQuery 2.0的源代码分析
有段时间没有使用jQuery了,对他的认识还停留在1.2 - 1.4左右. 前几天看,哇,原来jQuery 2.0 beta都发布了-- 以后不敢说自己会jQuery了. 决定趁着年末不忙,干脆分析一 ...
jQuery源码 Ajax模块分析
写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...
JQuery data API实现代码分析
JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the v ...
jQuery之ajax错误调试分析
jQuery中把ajax封装得非常好.但是日常开发中,我偶尔还是会遇到ajax报错.这里简单分析一下ajax报错一般的jQuery用法如下,ajax通过post方式提交"汤姆和老鼠&quo ...

JQuery 实现文件下载的常用方法分析

JQuery 实现文件下载的常用方法分析相关推荐

最新文章

热门文章