前端實現文件下載功能

在很多后台管理系統里可能會有導出表格，下載表格，下載壓縮包等這樣的需求。下面說幾種簡單的下載的方法：

1.最簡單的，有文件的地址，直接使用a標簽實現下載（通用模板前端本地下載）：

    <a href="/user/test/xxxx.xls" download="文件名.xls">點擊下載</a>

  但是有個情況，比如txt,png,jpg等這些瀏覽器支持直接打開的文件是不會執行下載任務的，而是會直接打開文件，這個時候就需要給a標簽添加一個屬性“download”;
如果再vue項目中需要下載文件需要放在public文件夾下 需要下載的路徑是相對於index.html文件路徑 否則會提示下載文件未找到

2.window.open()方法，后端提供下載接口：

html：

<button type="button" id="btn1">window.open()方法下載</button>

js：
（最簡單：window.location.href="xxxxx后端給的下載地址"）
var $eleBtn1 = $("#btn1");


//已知一個下載文件的后端接口：
https://codeload.github.com/douban/douban-client/legacy.zip/master
//方法一：window.open()
$eleBtn1.click(function(){
	var url = "https://codeload.github.com/douban/douban-client/legacy.zip/master";
	window.open(url);
});

3.通過form表單提交的方式：


html：

<button type="button" id="btn2">form方法下載</button>

js：

var $eleBtn2 = $("#btn2");

//已知一個下載文件的后端接口：
https://codeload.github.com/douban/douban-client/legacy.zip/master
$eleBtn2.click(function(){
	var $eleForm = $("<form method='get'></form>");

	$eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");

	$(document.body).append($eleForm);

	//提交表單，實現下載
	$eleForm.submit();
});