原文
大綱
1哟旗、需求分析
2贩据、通過a標(biāo)簽實(shí)現(xiàn)文件導(dǎo)出
3、實(shí)現(xiàn)方式
1闸餐、需求分析
導(dǎo)出文件饱亮，使用最多的方式還是服務(wù)器端來處理。比如jsp中使用response的方式舍沙。
但是近上，有時(shí)候可能就想使用web前端是否也可以把頁面上的內(nèi)容導(dǎo)出來呢？比如說场勤，導(dǎo)出頁面的一個(gè)表格戈锻。
這個(gè)需求肯定是有答案的，只是對(duì)于各瀏覽器處理會(huì)稍微不一樣和媳。(主要是IE和其他瀏覽器的區(qū)別)格遭。
在IE中使用ActiveXObject 實(shí)現(xiàn)，在firefox 和Chrome 中使用a標(biāo)簽（或者js）就可以實(shí)現(xiàn)了留瞳。
前端導(dǎo)出文件大部分還是通過服務(wù)器端的方式生成文件拒迅，然后傳遞到客戶端。但很多情況下當(dāng)我們導(dǎo)出CSV時(shí)并不需要后端參與她倘，甚至沒有后端璧微。
做過WebGIS的同學(xué)經(jīng)常會(huì)碰到這種場景，用戶的興趣點(diǎn)數(shù)據(jù)以csv文件形式上傳到web應(yīng)用中以表格形式展示硬梁，并可以編輯屬性信息前硫，編輯完成后需要將數(shù)據(jù)下載到本地。特別是對(duì)一些敏感數(shù)據(jù)荧止，用戶不希望傳遞到應(yīng)用服務(wù)器端屹电，整個(gè)過程完全在客戶端進(jìn)行。
2跃巡、通過a標(biāo)簽實(shí)現(xiàn)文件導(dǎo)出
2.1危号、通過a標(biāo)簽實(shí)現(xiàn)導(dǎo)出文件有兩種方式
1、通過href屬性來實(shí)現(xiàn)文件導(dǎo)出
2素邪、通過download屬性來實(shí)現(xiàn)文件導(dǎo)出（IE不兼容）
3外莲、通過navigator.msSaveBlob來實(shí)現(xiàn)（IE專屬，谷歌火狐不兼容）
2.2兔朦、需要注意
1偷线、IE有獨(dú)有的方法
2磨确、谷歌和火狐推薦使用結(jié)合Bolb、createObjectURL的方式(需要注意這兩者可能在低版本瀏覽器不兼容的情況)
3淋昭、需要注意的是在將數(shù)據(jù)導(dǎo)出成csv的時(shí)候需要先將數(shù)據(jù)轉(zhuǎn)換成對(duì)應(yīng)的格式俐填，這樣才能整齊導(dǎo)出
3、實(shí)現(xiàn)方式
3.1翔忽、IE瀏覽器
3.1.1英融、IE瀏覽器(IE10以下)
IE10以下，利用execCommand方法來保存csv文件
在實(shí)際應(yīng)用中瀏覽器會(huì)打開一個(gè)新窗口歇式，并彈出保存文件對(duì)話框驶悟，而對(duì)話框中保存類型時(shí)，只有html和text兩項(xiàng)可選材失，此時(shí)需要在文件名中手動(dòng)加上“.csv”后綴痕鳍。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "欄位1,欄位2,欄位3\n值1,值2,值3";
var fileName = "test.csv"
var oWin = window.top.open("about:blank", "_blank");
oWin.document.write('sep=,\r\n' + text);
oWin.document.close();
oWin.document.execCommand('SaveAs', true, fileName);
oWin.close();
}
</script>
</html>
3.1.2、IE瀏覽器(IE10以上)
IE10以及Edge瀏覽器使用navigator.msSaveBlob（blob）龙巨；雖然這些瀏覽器也支持execCommand的方法笼呆，但可以避免需要手動(dòng)添加文件后綴。
msSaveBlob是IE的私有方法旨别，只有IE10及以上和Edge瀏覽器支持诗赌。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "欄位1,欄位2,欄位3\n值1,值2,值3";
var BOM = "\uFEFF";
var fileName = "test.csv"http://名字不要寫錯(cuò)，尤其是后綴秸弛，這關(guān)系到下載的文件格式
var csvData = new Blob([BOM + text], { type: 'text/csv' });
navigator.msSaveBlob(csvData, fileName);
}
</script>
</html>
3.2铭若、Firefox、Chrome递览、Safari
3.2.1叼屠、 download基本使用模式
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "欄位1,欄位2,欄位3\n值1,值2,值3";
var BOM = "\uFEFF";
var fileName = "test.csv"
var csvData = new Blob([BOM + text], { type: 'text/csv' });
let downloadLink = document.createElement('a');
downloadLink.href = 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text);
downloadLink.target = '_blank';
downloadLink.download = fileName;
downloadLink.click();
}
</script>
</html>
3.2.2、利用a標(biāo)簽的href和download屬性
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "欄位1,欄位2,欄位3\n值1,值2,值3";
var BOM = "\uFEFF";
var fileName = "test.csv"
var csvData = new Blob([BOM + text], { type: 'text/csv' });
let downloadLink = document.createElement('a');
downloadLink.href = 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text);
downloadLink.target = '_blank';
downloadLink.download = fileName;
downloadLink.click();
}
</script>
</html>
3.2.3绞铃、對(duì)href的屬性進(jìn)行設(shè)置——使用createObjectURL創(chuàng)建連接镜雨，適用于較大的文件
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "欄位1,欄位2,欄位3\n值1,值2,值3";
var BOM = "\uFEFF";
var fileName = "test.csv"
var csvData = new Blob([BOM + text], { type: 'text/csv' });
let downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(csvData);
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
</script>
</html>
3.3.4、數(shù)據(jù)轉(zhuǎn)換成Blob形式再設(shè)置為href的值
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" download="downlaod.csv">download</a>
</body>
<script>
var data = "欄位1,欄位2,欄位3\n值1,值2,值3";
var blob = new Blob([data], { type: 'text/csv' }); //new way
var csvUrl = URL.createObjectURL(blob);
document.getElementById("mylink").href = csvUrl;
</script>
</html>
參考網(wǎng)址
https://www.cnblogs.com/dojo-lzz/p/4837041.html
http://blog.csdn.net/oscar999/article/details/16342699
