前言
導出文件，使用最多的方式還是服務器端來處理。比如jsp 中使用response 的方式。
但是，有時候可能就想使用web 前端是否也可以把頁面上的內容導出來呢？ 比如說，導出頁面的一個表格。
這個需求肯定是有答案的，只是對於各瀏覽器處理會稍微不一樣。(主要是IE 和其他瀏覽器的區別)。
在IE中使用ActiveXObject 實現，在firefox 和Chrome 中使用 a 標簽（或者js）就可以實現了。 這里主要講一下其他瀏覽器中的實現。
使用 a 標簽實現方式
直接上例子：
1 <head> 2 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 3 <meta name="author" content="oscar999"> 4 <title> 5 </title> 6 <script> 7 function clickDownload(aLink) 8 { 9 var str = "col1,col2,col3\nvalue1,value2,value3"; 10 str = encodeURIComponent(str); 11 aLink.href = "data:text/csv;charset=utf-8,"+str; 12 aLink.click(); 13 } 14 </script> 15 </head> 16 <body> 17 <a id="test" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a> 18 </body> 19 </html>
說明一下：
1. download 設置下載的文件名。
2. href 加上 data:text/txt;charset=utf-8 分別設置點擊link 是下載文件， 編碼是utf-8 . 這個逗號后面的就是保存在文件中的內容了。
以多行，多列導出csv 文件
csv 文件可以用Excel打開， 如果是導出一個table 的話，使用Excel 就方便很多了。
問題是： 如何分行， 分列？
理論上 ： 分列使用 ， 號分割， 分行用 \n .
可以用以上方式，會發現列可以分開，但是不換行。 看上去不認識 \n.
解決方式是使用 encodeURIComponent 進行編碼/
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<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>
</head>
<body>
<a id="test" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>
</body>
</html>
帶中文問題的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" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a> </body> </html>
這里有兩個改變
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
以上兩篇文章可以不去關注， 需要關注的是這個問題是否可以解決， 以及解決的方法是什么？
直接貼解決方案：
1 var blob = new Blob([data], { type: 'text/csv' }); //new way 2 var csvUrl = URL.createObjectURL(blob); 3 document.getElementById("mylink").href = csvUrl;
使用Blob 和URL 來封裝和轉換. 問題解決。
這里如遇中文問題， 和上面的處理方式是一樣的：
1. 頁面的charset 需設置成gb2312 （設成UTF-8 也可以）
2. 加上 \ufeff BOM 頭
具體的代碼類似：
data = "\ufeff"+data;
var blob = new Blob([data], { type: 'text/csv,charset=UTF-8'});
本文轉自（http://blog.csdn.net/oscar999/article/details/16342699#t2）