转自：http://www.cnblogs.com/dengnan/p/3990211.html

通过自己实际测试有以下几种方法

方法一通过a标签实现，把要导出的数据用“\n”和“,”拼接成一个字符串，然后把字符串放到href中，这种方法只支持chrome，firefox等非ie浏览器

html页面代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <meta name="author" content="oscar999">

        <title>导出CSV文件</title>

        <script>

        function exportCsv(obj){

            //title ["","",""]

            var title = obj.title;

            //titleForKey ["","",""]

            var titleForKey = obj.titleForKey;

            var data = obj.data;

            var str = [];

            str.push(obj.title.join(",")+"\n");

            for(var i=0;i<data.length;i++){

                var temp = [];

                for(var j=0;j<titleForKey.length;j++){

                    temp.push(data[i][titleForKey[j]]);

             }

             str.push(temp.join(",")+"\n");

         }

         var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(str.join(""));

         var downloadLink = document.createElement("a");

         downloadLink.href = uri;

         downloadLink.download = "export.csv";

         document.body.appendChild(downloadLink);

         downloadLink.click();

         document.body.removeChild(downloadLink);

      }

      window.onload = function(){

          document.getElementById("test").onclick = function(){

              exportCsv({

                  title:["第一列","第二列"],

                  titleForKey:["num1","num2"],

                  data:[

                     {

                      num1:"123",

                      num2:"fff"

                     },{

                      num1:"123",

                      num2:"fff"

                     },{

                      num1:"123",

                      num2:"fff"

                     }]

              });

         }

      }

      </script>

      </head>

<body>

  <a id="test" href="javascript:;">导出</a>

</body>

</html>

第二种方法通过ActiveXObject("Excel.Application")实现，这种方法只支持ie浏览器

html页面代码如下

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>IE导出CSV</title>

<script>

window.onload = function(){

    function exportCsv(){

        //创建AX对象excel

        var oXL = new ActiveXObject("Excel.Application");

        //获取workbook对象

        var oWB = oXL.Workbooks.Add();

        //激活当前sheet

        var oSheet = oWB.ActiveSheet;

        var Lenr = [["标题一","标题二","标题三"],["4","5","6"],["1","2","3"]];

        for (i = 0; i < Lenr.length; i++) {

            for (j = 0; j < Lenr[i].length; j++) {

                oSheet.Cells(i + 1, j + 1).value = Lenr[i][j];

            }

        }

        //设置excel可见属性

        oXL.Visible = true;

    }

    document.getElementById("J_export").onclick = function(){

        exportCsv();

    }

}

</script>

</head>

<body>

   <a href="javascript:;" id="J_export">导出</a>

</body>

</html>

第三种方法也是目前项目中正在使用的

通过使用FileSave.js实现FileSave.js插件https://github.com/eligrey/FileSaver.js/

html页面代码如下

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>IE导出CSV</title>

<script src="FileSaver.js"></script>

<script>

window.onload = function(){

    function exportCsv2(){

        //Excel打开后中文乱码添加如下字符串解决

        var exportContent = "\uFEFF";

        var blob = new Blob([exportContent+"标题,标题,标题\n1,2,3\n4,5,6"],{type: "text/plain;charset=utf-8"});

        saveAs(blob, "hello world.csv");

    }

    document.getElementById("J_export").onclick = function(){

        exportCsv2();

    }

}

</script>

</head>

<body>

    <a href="javascript:;" id="J_export">导出</a>

</body>

</html>

【转载】JS导出CSV文件的更多相关文章

  1. Web 端 js 导出csv文件(使用a标签)

    前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...

  2. Web 端 js 导出csv文件

    http://www.qdfuns.com/notes/35821/2ab249182734d1f5c66da6b5cf395db9.html

  3. EasyUI 如何结合JS导出Excel文件

    出处:http://blog.csdn.net/jumtre/article/details/41119991 EasyUI 如何结合JS导出Excel文件 分类: 技术 Javascript jQu ...

  4. web前端导出csv文件

    前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...

  5. ASP.NET MVC 导出CSV文件

    ASP.NET MVC   导出CSV文件.直接贴代码 /// <summary> /// ASP.NET MVC导出CSV文件Demo1 /// </summary> /// ...

  6. 解决bcp导出CSV文件没有表头

    思路: 1.输出表头文件到指定目录 2.bcp导出csv文件到temp目录 3.将以上导出文件与表头文件合并 4.删除temp目录下的文件 实现: create proc exportCSV ( @i ...

  7. 导出csv文件示例

    导出csv文件示例 csv文件默认以英文逗号,做为列分隔符换行符\n作为行分隔符,写入到一个.csv文件即可.含有英文逗号,和换行符会发生数据输出会出现混乱,下面列出一些处理方法.特殊字符处理1.含有 ...

  8. mysql SQLyog导入导出csv文件

    1.选择数据库表 --> 右击属性 --> 备份/导出 --> 导出表数据作为 --> 选择cvs --> 选择下面的“更改” --> 字段 --> 变量长度 ...

  9. PHP 读取/导出 CSV文件

    工作中经常会有遇到导入/导出的需求,下面是常用的方法.读取CSV文件,可以分页读取,设置读取行数,起始行数即可.导出CSV文件,用两种方法进行实现. /** * 读取CSV文件 * @param st ...

随机推荐

  1. Python学习零基础＜入门必学＞

    1. 注释注释 是任何存在于 # 号右侧的文字,其主要用作写给程序读者看的笔记. 2. 字面常量一个字面常量(Literal Constants)的例子是诸如 5.1.23 这样的数字,或者是如 这是 ...

  2. 浅析设计模式之mvc、mvp、mvvm

    mvc.mvvm.mvp是常见的设计模式,也是常见的设计思想,现对它们进行简要的归纳总结 三种模式的介绍 1.MVC:经典设计模式 View 传送指令到 Controller(控制器) Control ...

  3. opencv —— setMouseCallback 响应鼠标操作事件

    鼠标操作:setMouseCallback 函数 借助回调函数,实现对鼠标每次操作的相应,即每进行一步鼠标操作,都会执行一次回调函数. void setMouseCallback(const stri ...

  4. 简单的OO ALV显示ALV及下载

    REPORT OO_ALV. CLASS OO_ALV DEFINITION. PUBLIC SECTION. METHODS:GET_DATA IMPORTING AMOUNT TYPE I,&qu ...

  5. kali linux 渗透入门之基础准备-Burp Suite 代理设置

    一:安装火狐浏览器-插件与设置中文 打开浏览器,复制粘贴这条url: https://addons.mozilla.org/en-US/firefox/addon/chinese-simplified ...

  6. USB-Blaster CPLD FPGA Intel 驱动安装不上的问题，文件的哈希值不在指定的目录文件中，的解决办法，其实很简单

    intel的官网的驱动安装文档: https://www.intel.com/content/www/us/en/programmable/support/support-resources/down ...

  7. YARN安装和使用

    简介 Yet Another Resource Negotiator ,负责整个集群资源的调度,和管理,支持多框架资源统一调度(HIVE spark flink) 开启yarn 安装hadoop,可以 ...

  8. Go并发模式代码示例

    演讲稿:Go Concurrency Patterns Youtube视频 作者:Rob Pike 练习题目:谷歌搜索:一个虚拟框架 谷歌搜索1.0 PPT从43页开始:https://talks.g ...

  9. vue(四)--属性绑定

    v-bind通过v-bind进行属性绑定v-bind:href, 可以简写成 :href <body> <div id="app"> <a v-bin ...

  10. #AcWing系列课程Level-2笔记——4. 浮点数二分算法

    浮点数二分算法 编写浮点数二分,记住下面的思路,代码也就游刃有余了! 1.首先找到数组的中间值,mid=(left+right)>>1,区间[left, right]被划分成[left, ...