关于JS访问文件服务器的HTTP文件地址实现文件下载

5 篇文章 0 订阅

    开发过程中遇到一个需求变动,主管要求网站在提供文件下载的时候不要使用 服务写流的形式(out.write)进行文件下载。需要改造成将文件生成到 文件服务器路径下,然后以http的形式直接进行文件访问、下载。  我想这个访问http地址显示文件的方式,大家应该都回使用到,比如:需要加载远程图片时<img src = "http://...." />。而现在需要实现的是文件下载...

    (需求:下载文件类型为PDF文件)

    刚开始还以为直接使用 window.open()或者 <a href="" target="blank"><a/>就能够轻松实现下载,说到这里是不是很天真。

    上面这两种方式貌似之后再返回的是压缩包的情况下才会下载。而PDF使用这个方法360,google等浏览器中都回直接进行文件预览。

   所以上面的两种方法就被我排除了。


    于是我开始了百度,搜索了半天,发现有两种解决方案:

一、使用第三方插件的形式,如:jQuery的插件jdownload,但是它是以弹出框提示信息的形式,需要客户再点击弹出框的下载按钮后才能进行文件下载,------排除。

  二、使用iframe实现文件下载

具体实现方式:

        //触发函数
        function downloadfile(url) {
            var iframe = document.createElement("iframe");
            iframe.src = url;
            iframe.style.display = "none";
            document.body.appendChild(iframe);
        }
这种方式也有缺陷,只能IE浏览器才能进行下载,使用google浏览器时就报错了,错误如下:

               Resource interpreted as Document but transferred with MIME type application/pdf

             根据这个错误提示我又开始寻找解决方案, 由于访问图片是根据tomcat服务器,我就想是不是tomcat服务器的mime-type缺少了application/pdf类型而导致的。然后我就找到了tomcat的web.xml文件,却发现mime-type中有application/pdf这个类型。  又一次进入蒙圈的状态····


    又开始找啊找,又找到了一种方式,html5为 <a>标签提供了一个download属性,会将<a>标签访问路径后的资源进行下载, download中填写的是下载后的文件名。这个方法总算是解决了我的问题。 具体实现方式:

<a download="" href="" target="blank" id="downPdf"></a>

//js方法
$.post(url,{param1,param2},function(data){			
		if(data.code==0){
			try{ 
				var a = document.getElementById("downPdf");
				a.href=data.url;
				a.download=data.fileName;
				a.click();
			}catch(e){ 
			} 
		}else{
			alert(data.errorMsg);
		}								
	});	

   为了解决这个问题,我是绕了一圈又回到原点,说多了都是泪啊。  希望这个解决方案能够帮助到大家。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值