码迷,mamicode.com
首页 > 其他好文 > 详细

利用a标签导出csv文件

时间:2018-07-12 01:02:25      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:创建   需求分析   3.4   lin   lob   tail   展示   答案   生成   

原文

  简书原文: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文件

标签:创建   需求分析   3.4   lin   lob   tail   展示   答案   生成   

原文地址:https://www.cnblogs.com/shcrk/p/9297426.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!