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


Posted in jQuery onOctober 29, 2019

本文实例讲述了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为什么不能下载文件

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

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实现可拖动进度条实例代码
Jun 21 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
jquery实现购物车基本功能
Oct 25 #jQuery
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
jQuery实现轮播图源码
Oct 23 #jQuery
You might like
判断PHP数组是否为空的代码
2011/09/08 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
JS中表单的使用小结
2014/01/11 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python生成随机mac地址的方法
2015/03/16 Python
使用python实现rsa算法代码
2016/02/17 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Python日志处理模块logging用法解析
2020/05/19 Python
python 利用zmail库发送邮件
2020/09/11 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
党员承诺书怎么写
2014/05/20 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
房地产项目合作意向书
2015/05/08 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书