前言
導出檔案，使用最多的方式還是伺服器端來處理。比如jsp 中使用response 的方式。
但是，有時候可能就想使用web 前端是否也可以把頁面上的内容導出來呢？ 比如說，導出頁面的一個表格。
這個需求肯定是有答案的，隻是對于各浏覽器處理會稍微不一樣。(主要是IE 和其他浏覽器的差別)。
在IE中使用ActiveXObject 實作，在firefox 和Chrome 中使用 a 标簽（或者js）就可以實作了。 這裡主要講一下其他浏覽器中的實作。
使用 a 标簽實作方式
直接上例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title></title>
</head>
<body>
<a id="test" download="downlaod.txt" href="data:text/txt;charset=utf-8,download Test Data">download</a>
</body>
</html>
說明一下：
1. download 設定下載下傳的檔案名。
2. href 加上 data:text/txt;charset=utf-8 分别設定點選link 是下載下傳檔案， 編碼是utf-8 . 這個逗号後面的就是儲存在檔案中的内容了。
以多行，多列導出csv 檔案
csv 檔案可以用Excel打開， 如果是導出一個table 的話，使用Excel 就友善很多了。
問題是： 如何分行， 分列？
理論上 ： 分列使用 ， 号分割， 分行用 \n .
可以用以上方式，會發現列可以分開，但是不換行。 看上去不認識 \n.
解決方式是使用 encodeURIComponent 進行編碼/
<title>
</title>
<script>
function clickDownload(aLink)
{
var str = "col1,col2,col3\nvalue1,value2,value3";
str = encodeURIComponent(str);
aLink.href = "data:text/csv;charset=utf-8,"+str;
aLink.click();
}
</script>
<a id="test" οnclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>
帶中文問題的csv 導出
以上使用的都是utf-8 編碼，理論上導出中文應該不是問題。
但是導出csv 格式的話， 使用Excel 打開會發現中文是亂碼，但是用其他文本程式打開确是正常的。
原因就是少了一個 BOM頭 。 \ufeff。
加上一切都正常了，
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="oscar999">
<title>
</title>
<script>
function clickDownload(aLink)
{
var str = "欄位1,欄位2,欄位3\n值1,值2,值3";
str = encodeURIComponent(str);
aLink.href = "data:text/csv;charset=utf-8,\ufeff"+str;
aLink.click();
}
</script>
</head>
<body>
<a id="test" οnclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>
</body>
這裡有兩個改變
1. 頁面的charset 需設定成gb2312
2. 加上 \ufeff BOM 頭
Chrome下載下傳的檔案名
以上使用 a 的download 屬性可以指定下載下傳的檔案名及字尾。 但是在Chrome 執行的時候會發現， Chrome 壓根不理會這個。
下載下傳名是 "下載下傳" 或是 "download".
上網搜尋一下， 有說是Chrome 的 bug.
參見 stackoverflow 中的兩篇文章：
http://stackoverflow.com/questions/23962284/download-attribute-on-a-tag-doesnt-work-in-chrome
http://stackoverflow.com/questions/23816005/anchor-tag-download-attribute-not-working-bug-in-chrome-35-0-1916-114
以上兩篇文章可以不去關注， 需要關注的是這個問題是否可以解決， 以及解決的方法是什麼？
直接貼解決方案：
var blob = new Blob([data], { type: 'text/csv' }); //new way
var csvUrl = URL.createObjectURL(blob);
document.getElementById("mylink").href = csvUrl;
使用Blob 和URL 來封裝和轉換. 問題解決。
這裡如遇中文問題， 和上面的處理方式是一樣的：
1. 頁面的charset 需設定成gb2312 （設成UTF-8 也可以）
具體的代碼類似：
data = "\ufeff"+data;
var blob = new Blob([data], { type: 'text/csv,charset=UTF-8'});
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)