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选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来分析一下失败的原因 一.失败的原因 那是因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png.文件下载等,然而ajax请求只是个"字符型"的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白

  • 跟我一起学写jQuery插件开发方法（附完整实例及下载）

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能 这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还

  • 强烈推荐240多个jQuery插件提供下载

    强烈推荐240多个jQuery插件提供下载

    jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J

  • jQuery实现图片下载代码

    jQuery 实现图片下载代码,供大家参考,具体内容如下 function downloadImage(src) { var $a = $("<a></a>").attr("href", src).attr("download", "meitu.png"); $a[0].click(); } 关键调用downloadImage函数代码 onclick=downloadImage(url) 完整 js 代

  • PHP+Mysql+jQuery文件下载次数统计实例讲解

    PHP+Mysql+jQuery文件下载次数统计实例讲解

    项目中我们需要统计文件的下载次数,用户每下载一次文件,相应的下载次数加1,类似的应用在很多下载站中用到.本文结合实例使用PHP+Mysql+jQuery,实现了点击文件,下载文件,次数累加的过程,整个过程非常流畅. 准备工作 本实例需要读者具备PHP.Mysql.jQuery以及html.css等相关的基本知识,在开发示例前,需要准备Mysql数据表,本文假设有一张文件下载表downloads,用来记录文件名.保存在文件服务器上的文件名以及下载次数.前提是假设下载表中已存在数据,这些数据可能来自

  • jquery实现下载图片功能

    本文实例为大家分享了jquery实现下载图片的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js&quo

  • jQuery使用动态渲染表单功能完成ajax文件下载

    复制代码 代码如下: // Ajax 文件下载 jQuery.download = function(url, data, method){ // 获取url和data if( url && data ){ // data 是 string 或者 array/object data = typeof data == 'string' ? data : jQuery.param(data); // 把参数组装成 form的 input var inputs = ''; jQuery.each

  • jQuery的ajax下载blob文件

    乍一听有点蒙,之前用ng和react时也写过类似的功能,但是很顺利(所以忘记具体细节了).jquery为啥会不行呢?看了一下具体场景,发现原来jq的ajax回调已经把response的数据傻瓜式的以字符串的方式解析了. 查了一下gg,发现国内的解决方案就是在该场景下不实用jq,而是自己手动创建XMLHttpRequest.虽然这个方法很可靠,但之前封装的jq的ajax就不能使用了. 查了查jq的文档,本打算自己根据jq提供的jQuery.ajaxSetup()接口来拓展数据类型,但怎么都搞不定.

  • JQuery的AJAX实现文件下载的小例子

    复制代码 代码如下: var form=$("<form>");//定义一个form表单form.attr("style","display:none");form.attr("target","");form.attr("method","post");form.attr("action","exportData"

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

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

    本文实例讲述了JQuery 实现文件下载的常用方法.分享给大家供大家参考,具体如下: GET方式 window.location.href = url; POST方式 var url = "下载接口地址"; // 构造隐藏的form表单 var $form = $("<form id='download' class='hidden' method='post'></form>"); $form.attr("url",ur

  • jquery操作checkbox的常用方法总结【附测试源码下载】

    本文实例讲述了jquery操作checkbox的常用方法.分享给大家供大家参考,具体如下: 做系统的过程中,与checkbox 复选框打交道,是难免的,而且在每个系统中,简直是必不可少的一道菜,通常的操作有一下几种: 1.用jquery 全部选择checkbox 2.用jquery 全部取消checkbox 3.用jquery 实现checkbox 反选 4.用jquery 获取所有已选择checkbox的值. 现在将这些常用的操作总结在一个例子中,方便以后查询,不愿意看代码的,也可以下载源码运

  • jQuery添加新内容的四个常用方法分析【append，prepend，after，before】

    本文实例讲述了jQuery添加新内容的四个常用方法.分享给大家供大家参考,具体如下: 添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容 prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); //jQuery prepend() 方法在被选元素的开头插入内容. $(&q

  • jQuery的text()方法用法分析

    本文实例讲述了jQuery的text()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或者设置匹配元素的文本内容. 如需了解更多相关内容可参阅参考手册text()方法. 特别说明: HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. text()方的使用: 用法一: 此方法不带参数时候,功能是取得所有匹配元素的文本内容,并且结果是由所有匹配元素包含的文本内容组合起来的文本.

  • jQuery中get方法用法分析

    本文实例讲述了jQuery中get方法用法.分享给大家供大家参考,具体如下: 参数:url,[data],[callback],[type] url 待载入页面的URL地址. data 待发送 Key/value 参数. callback 载入成功时回调函数. type 返回内容格式,xml, html, script, json, text, _default. 案例1 表单代码: <form id="form1" action="#"> <p&

  • jquery读写cookie操作实例分析

    本文实例分析了jquery读写cookie操作.分享给大家供大家参考,具体如下: jquery cookie需要脚本文件如下: jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.ex

  • jQuery解析json数据实例分析

    jQuery解析json数据实例分析

    本文实例分析了jQuery解析json数据的方法.分享给大家供大家参考,具体如下: 先来看看我们的Json数据格式: [ {id:01,name:"小白",old:29,sex:"男"}, {id:02,name:"小蓝",old:29,sex:"男"}, {id:03,name:"小雅",old:29,sex:"男"} ] 为了消除乱码问题,我们设置一个过滤器(代码片段) public

  • php文件下载处理方法分析

    本文实例讲述了php文件下载的处理方法.分享给大家供大家参考.具体分析如下: php能够处理多种条件的文件下载,先来看下面示例: <?php header("Content-Type: application/force-download"); header("Content-Disposition: attachment; filename=testname.jpg"); readfile("images/test.jpg"); ?>

  • jQuery中noConflict()用法实例分析

    本文实例讲述了jQuery中noConflict()用法.分享给大家供大家参考.具体分析如下: jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突.在运行这个函数后,就只能使用jQuery变量访问jQuery对象.例如,在要用到$("div p")的地方,就必须换成jQuery(&

  • jquery中change()用法实例分析

    本文实例分析了jquery中change()的用法.分享给大家供大家参考.具体分析如下: change()当元素的值发生改变时,会发生 change 事件.该事件仅适用于文本域(text field),以及 textarea 和 select 元素. 当用于 select 元素时,change 事件会在选择某个选项时发生.当用于 text field 或 text area 时,该事件会在元素失去焦点时发生.   一.change的用法 1.触发 change 事件:触发被选元素的 change

随机推荐