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

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

GET方式

1

window.location.href = url;

POST方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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返回,无法触发浏览器的下载处理机制和程序。

1

2

3

4

5

6

7

// 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()

 

 

ajax下载文件全部代码

function testAjaxDownload(){
	var url = "http://127.0.0.1:8080/candidateData/txtdownload";
	
	$.ajax({
		  type:'get',
		  url: url,
		  async:false,
		  success:function(data, statusTest, xhr){
			  	console.log(xhr);
			    console.log(xhr.getAllResponseHeaders());//获取所有的响应头消息
			    
			    let fileName = xhr.getResponseHeader("content-disposition").split(';')[1].split('=')[1].replace(/\"/g,'')
                let type =  xhr.getResponseHeader("content-type")
                let blob = new Blob([data],{type:type}) 
                
                //对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
                //IE10以上支持blob但是依然不支持download
                if ('download' in document.createElement('a')) { //支持a标签download的浏览器
                        const link = document.createElement('a')//创建a标签
                        link.download = fileName//a标签添加属性
                        link.style.display = 'none'
                        link.href = URL.createObjectURL(blob)
                        document.body.appendChild(link)
                        link.click()//执行下载
                        URL.revokeObjectURL(link.href) //释放url
                        document.body.removeChild(link)//释放标签
                } else { //其他浏览器
                        if(window.navigator.msSaveOrOpenBlob){
                                window.navigator.msSaveOrOpenBlob(blob,fileName)
                        }
                }
			    
		  }
	});
}

 注意:上面这种方法下载文本文件是没有问题的,下载二进制文件比如excel、word文件是有问题的

 

HTML5 Blob对象

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

创建Blob对象

1

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"

1

2

3

4

// 例如创建一个装填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)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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();

 

注意:使用xmlhttprequest 可以指定responseTyp为blob,但是使用ajax是不能指定responseType为blob的

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery滑动验证是一种常用的网页验证码形式,其源码可以实现用户通过滑动滑块来验证身份。下面是基本的jQuery滑动验证源码分析: 1. 首先,需要引入jQuery库,确保在HTML文件中有以下代码: ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 2. 在HTML文件中,需要有以下基本结构: ```html <div class="slider"> <div class="slider-bar"></div> <div class="slider-block"></div> </div> ``` 3. 接下来,在JavaScript中,需要使用jQuery选择器和事件处理来实现滑动验证的功能: ```javascript $(document).ready(function() { var isMouseDown = false; var sliderBar = $(".slider-bar"); var sliderBlock = $(".slider-block"); var offsetX = 0; // 鼠标按下事件 sliderBlock.mousedown(function(e) { isMouseDown = true; offsetX = e.pageX - $(this).offset().left; // 计算鼠标距离滑块左边的位置 }); // 鼠标移动事件 $(document).mousemove(function(e) { if (isMouseDown) { var left = e.pageX - offsetX - sliderBar.offset().left; // 计算滑块的相对位置 if (left >= 0 && left <= sliderBar.width() - sliderBlock.width()) { sliderBlock.css("left", left); // 移动滑块 } } }); // 鼠标松开事件 $(document).mouseup(function(e) { if (isMouseDown) { isMouseDown = false; var left = e.pageX - offsetX - sliderBar.offset().left; if (left >= (sliderBar.width() - sliderBlock.width())) { sliderBlock.css("left", (sliderBar.width() - sliderBlock.width())); // 滑到最右边则验证通过 alert("验证通过!"); } else { sliderBlock.animate({left: 0}, 200); // 滑回原位 } } }); }); ``` 通过上述代码,就可以实现一个基本的jQuery滑动验证功能。具体的样式和动画效果可以根据需求进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值