利用a標簽導出csv文件
原文
簡書原文:https://www.jianshu.com/p/a8687610cda3
大綱
1、需求分析
2、通過a標簽實現文件導出
3、實現方式
1、需求分析
導出文件,使用最多的方式還是服務器端來處理。比如jsp中使用response的方式。
但是,有時候可能就想使用web前端是否也可以把頁面上的內容導出來呢?比如說,導出頁面的一個表格。
這個需求肯定是有答案的,只是對於各瀏覽器處理會稍微不一樣。(主要是IE和其他瀏覽器的區別)。
在IE中使用ActiveXObject 實現,在firefox 和Chrome 中使用a標簽(或者js)就可以實現了。
前端導出文件大部分還是通過服務器端的方式生成文件,然後傳遞到客戶端。但很多情況下當我們導出CSV時並不需要後端參與,甚至沒有後端。
做過WebGIS的同學經常會碰到這種場景,用戶的興趣點數據以csv文件形式上傳到web應用中以表格形式展示,並可以編輯屬性信息,編輯完成後需要將數據下載到本地。特別是對一些敏感數據,用戶不希望傳遞到應用服務器端,整個過程完全在客戶端進行。
2、通過a標簽實現文件導出
2.1、通過a標簽實現導出文件有兩種方式
1、通過href屬性來實現文件導出
2、通過download屬性來實現文件導出(IE不兼容)
3、通過navigator.msSaveBlob來實現(IE專屬,谷歌火狐不兼容)
2.2、需要註意
1、IE有獨有的方法
2、谷歌和火狐推薦使用結合Bolb、createObjectURL的方式(需要註意這兩者可能在低版本瀏覽器不兼容的情況)
3、需要註意的是在將數據導出成csv的時候需要先將數據轉換成對應的格式,這樣才能整齊導出
3、實現方式
3.1、IE瀏覽器
3.1.1、IE瀏覽器(IE10以下)
IE10以下,利用execCommand方法來保存csv文件
在實際應用中瀏覽器會打開一個新窗口,並彈出保存文件對話框,而對話框中保存類型時,只有html和text兩項可選,此時需要在文件名中手動加上“.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的方法,但可以避免需要手動添加文件後綴。
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"//名字不要寫錯,尤其是後綴,這關系到下載的文件格式 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標簽的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、對href的屬性進行設置——使用createObjectURL創建連接,適用於較大的文件
<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、數據轉換成Blob形式再設置為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>
參考網址
https://www.cnblogs.com/dojo-lzz/p/4837041.html
http://blog.csdn.net/oscar999/article/details/16342699
利用a標簽導出csv文件