1. 程式人生 > >關於JS訪問檔案伺服器的HTTP檔案地址實現檔案下載

關於JS訪問檔案伺服器的HTTP檔案地址實現檔案下載

    開發過程中遇到一個需求變動,主管要求網站在提供檔案下載的時候不要使用 服務寫流的形式(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);
		}								
	});	

   為了解決這個問題,我是繞了一圈又回到原點,說多了都是淚啊。  希望這個解決方案能夠幫助到大家。