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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
基于PHP制作验证码
2016/10/12 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
js控制table合并具体实现
2014/02/20 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Python subprocess模块常见用法分析
2018/06/12 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
python字符串判断密码强弱
2020/03/18 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
法律意见书范文
2015/06/04 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript