長期以來，在做文件下載功能的時候都是前端通過ajax把需要生成的文件的內容參數傳遞給后端，后端通過Java語言將文件生成在服務器，然后返回一個文件下載的連接地址url。前端通過location.href = url或者window.open(url),完成文件的下載。
前端似乎在這個過程中沒有產生什么較大的作用，無非是發送請求和打開頁面的作用。以前就在尋找這樣的文件下載方式，今天終於在業務需要的壓力下找到了對應的解決方案。
HTML與文件下載
如果希望在前端直接出發某些資源的下載，最方便快捷的方法就是使用HTML5原生的download屬性， 例如：
<a href="large.jpg" download>下載</a>
但顯然，如果純粹利用HTML屬性來實現文件的下載（而不是瀏覽器打開或瀏覽），對於動態內容，就無能為力。
例如，我們對於頁面進行分享的時候，希望分享圖片是頁面內容的實時截圖，此時，這個圖片就是動態的，純HTML顯然無法滿足我們的需求，借助JS和其他一些HTML5特性，例如，將頁面元素轉換到canvas上，然后在轉成圖片進行下載。
單只是完成圖片的下載不能滿足日常業務的需求，對於業務需求是遠遠不夠的。
借助HTML5 Blob實現文本信息文件下載
如果對Blob不了解，可以先看看張鑫旭的理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型一文。
原理其實很簡單，我們可以將文本或者JS字符串借助Blob轉換成二進制，然后，作為a元素的href屬性，配合download屬性，實現下載。
代碼也比較簡單，如下示例（兼容Chrome和FireFox）：
var funDownload = function(content, filename){ // 創建隱藏的可下載鏈接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 字符內容轉變成blob地址 var blob = new Blob([content]); eleLink.href = URL.createObjectURL(blob); // 觸發點擊 document.body.appendChild(eleLink); eleLink.click(); // 然后移除 document.body.removeChild(eleLink); };
其中，content指需要下載的文本或者字符串內容，filename指下載到系統中的文件名稱。
借助Base64實現任一文件下載
對於非文本文件，也是可以直接JS觸發下載的，例如，如果我們想下載一張圖片，可以把這張圖片轉換成Base64格式，然后下載。
代碼示例：
var funDownload = function(domImg, filename){ // 創建隱藏的可下載鏈接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 圖片base64地址 var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var width = domImg.natureWidth; var height = domImg.natureHeight; context.drawImage(domImg, 0, 0); // 如果是PNG圖片，則context.toDataURL('image/png'); eleLink.href = context.toDataURL('image/jpeg'); // 觸發點擊 document.body.appendChild(eleLink); eleLink.click(); // 移除 document.body.removeChild(eleLink); };
不止是.html文件，.txt,.json等只要內容是文本的文件，都可以利用這種小技巧實現下載。
在Chrome瀏覽器下，模擬點擊創建的a元素及時不append到頁面中，也是可以觸發下載的，但是在FireFox瀏覽器中卻不行，因此，上面的funcDownload()方法有一個appendChild和removeChild的處理，就是為了兼容FireFox瀏覽器。
繼續說實現在下CSV文件的方法
我們通過ajax從后端請求到的數據一般都是json格式，也就是說需要把json數據轉成csv格式的數據，經過尋找終於找到了一個比較好用的json轉csv的工具。
直接上示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Download</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="demo">
<p><input type="button" value="作為test.html文件下載"></p>
</div>
<script src="json2csv.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// 示例數據
var fields = ['car', 'price', 'color'];
var myCars = [
{
"car": "Audi",
"price": 40000,
"color": "blue"
}, {
"car": "BMW",
"price": 35000,
"color": "black"
}, {
"car": "Porsche",
"price": 60000,
"color": "green"
}
];
// json數據轉csv格式
var csv = json2csv({ data: myCars, fields: fields });
var eleButton = document.querySelector('input[type="button"]');
// 下載文件方法
var funDownload = function (content, filename) {
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符內容轉變成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 觸發點擊
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
if ('download' in document.createElement('a')) {
// 作為test.html文件下載
eleButton.addEventListener('click', function () {
funDownload(csv, 'test.csv');
});
} else {
eleButton.onclick = function () {
alert('瀏覽器不支持');
};
}
</script>
</body>
</html>
其中的json2csv.js文件可以在這里下載，或者獲取源碼。
內容參考來源
1.下載功能主要參考張鑫旭的博客中的一片文章：小tip:JS前端創建html或json文件並瀏覽器導出下載；
2.json2cav的代碼參考來源為：https://github.com/zemirco/json2csv；
