js和其他後臺語言結合實現附件下載功能

螞蟻小編發表於2017-03-27
JS

下載功能這個不用多說吧，就算是以前沒有開發過，用過應該是肯定的，如果下載附件這樣的功能都沒有使用過幾乎是難以想象的，下面介紹一下利用java結合javascript實現的附件下載功能，希望能夠給需要的朋友帶來一定的幫助，實現過程如下:

一.java後臺程式碼:

[Java] 純文字檢視 複製程式碼
@RequestMapping(value = "download.html", method = RequestMethod.GET) 
public void download(String resourceid, HttpServletRequest request, HttpServletResponse response) { 
  response.setContentType("charset=UTF-8"); 
  File file = new File(path); 
  response.setHeader("Content-Disposition", "attachment; filename=a"); 
  BufferedInputStream bis = null; 
  BufferedOutputStream bos = null; 
  OutputStream fos = null; 
  InputStream fis = null; 
  try { 
    fis = new FileInputStream(file.getAbsolutePath()); 
    bis = new BufferedInputStream(fis); 
    fos = response.getOutputStream(); 
    bos = new BufferedOutputStream(fos); 
    int bytesRead = 0; 
    byte[] buffer = new byte[5 * 1024]; 
    while ((bytesRead = bis.read(buffer)) != -1) { 
      bos.write(buffer, 0, bytesRead); 
    } 
    bos.flush(); 
  }
  catch(E e){ }
  finally { 
    try { 
      bis.close(); 
      bos.close(); 
      fos.close(); 
      fis.close(); 
    } 
    catch (IOExcepti[url=]2[/url]on e) { 
      e.printStackTrace(); 
    } 
  } 
}

上面是java程式碼部分，當然這裡不是重點，這是後臺程式人員的事情，當然如果前後臺都會那就更好了。

這個時候如果我們再前端要進行附近下載請求這個檔案，伺服器先找出檔案，設定響應頭，然後通過流輸出到瀏覽器端。

瀏覽器在頭中發現該響應的主體是流檔案，則自動會呼叫另存為的視窗，讓使用者儲存下載，實現原理如下:

設定Content-Disposition屬性值，它是MIME協議的擴充套件，用於指示如何讓客戶端顯示附件的檔案，屬性值可以有兩個:

[Java] 純文字檢視 複製程式碼
inline //線上開啟
attachment //作為附件下載

在我們的需求中，需要將屬性值設定為attachment。

上面分析的是關於java後臺的相關設定，下面介紹一下js前端的設定。

二.前臺相關程式碼:下面是前端請求的幾種常用方式:

1.form表單方式:

[HTML] 純文字檢視 複製程式碼
<form action='download.html' method='post'> 
<input type='submit'/> 
</form>

2.iframe方式:

[JavaScript] 純文字檢視 複製程式碼
var iframe = "<iframe style='display:none' src='download.html'></iframe>" 
body.append(iframe);

3.window.open()方式:

[JavaScript] 純文字檢視 複製程式碼
window.open("download.html");

相關文章