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

方法一通过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>

网页前端导出CSV，Excel格式文件的更多相关文章

  1. 将Mysql的一张表导出至Excel格式文件

    将Mysql的一张表导出至Excel格式文件 导出语句 进入mysql数据库,输入如下sql语句: select id, name, age from tablename into outfile ' ...

  2. 将table导出为excel格式文件

    html: <table cellpadding="0" cellspacing="0" class="data_table" id= ...

  3. Powerdesigner 导出Excel格式数据字典 导出Excel格式文件

    版权声明:本文为博主原创文章,转载请注明出处; 网上我也看到了很多的Powerdesigner 导出方法,因为Powerdesigner 提供了部分VBA功能,所以让我用代码导出Excel格式文件得以 ...

  4. 使用PHPExcel导入导出excel格式文件

    使用PHPExcel导入导出excel格式文件  作者:zccst  因为导出使用较多,以下是导出实现过程.  第一步,将PHPExcel的源码拷贝到项目的lib下  文件包含:PHPExcel.ph ...

  5. 将ACCESS 的数据库中的表的文件 导出了EXCEL格式

    将ACCESS 的数据库中的表的文件 导出了EXCEL格式 '''' '将ACCESS数据库中的某个表的信息 导出为EXCEL 文件格式 'srcfName ACCESS 数据库文件路径 'desfN ...

  6. 前端导出csv

    前端导出csv export: function(data, name) { // csv文件的BOM头 \ufeff可以让excel等识别出csv文件的编码 var uri = 'data:text ...

  7. SPOOL 命令使用实例【oracle导出纯文本格式文件】

    SPOOL 命令使用实例[oracle导出纯文本格式文件] SET echo off              --在用start命令执行一个sql脚本时,是否显示脚本中正在执行的SQL语句: SET ...

  8. java导入导出下载Excel,xls文件(带下拉框)

    /** * 导入excel文件 * 2014-7-23 * @return */ @RequiresPermissions("plug:product:caiwu:upload") ...

  9. python读取与写入csv,txt格式文件

    python读取与写入csv,txt格式文件 在数据分析中经常需要从csv格式的文件中存取数据以及将数据写书到csv文件中.将csv文件中的数据直接读取为dict类型和DataFrame是非常方便也很 ...

随机推荐

  1. 【47】迁移学习（Transfer Learning）

    迁移学习(Transfer Learning) 如果你要做一个计算机视觉的应用,相比于从头训练权重,或者说从随机初始化权重开始,如果你下载别人已经训练好网络结构的权重,你通常能够进展的相当快,用这个作 ...

  2. 非maven配置SpringBoot框架

    简介 最近看SpringBoot框架非常火,所以尝试的参照资料学习了一下SpringBoot框架, 起初是搭建的maven项目,可是个人觉得maven项目搭建起来不太方面(还有网络 原因),所以我这性 ...

  3. STM32学习笔记 —— 0.1 Keil5安装和DAP仿真下载器配置的相关问题与注意事项

    Keil5安装的注意事项 安装细节在此不再做过多赘述,主要介绍一下注意事项: 安装路径中不能有中文. ARM的Keil的路径不能与51的Keil的有冲突,必须将目录分开. Keil5中不会自动添加芯片 ...

  4. 关于学习java虚拟机的知识整理一：jvm内存区域

    之前由于考研,对于虚拟机的认识疏忽了太多,现在重新整理回顾一下. 如上图所示,jvm的内存区域(运行时数据区)共分为5处:方法区(Method Area).虚拟机栈(vm Stack).本地方法栈(N ...

  5. 关于IO板的输出（Do的写入）

    IO板的输入输出遵循MODBUS协议 1.单个DO开关量寄存器写入-功能码05 例子-打开信道3 01 05 00 02 00 00 CD CA 01 从机地址(由io的配置文件决定) 05  功能码 ...

  6. Socket之TCP-IP

    通常的TCP/IP流程如下: TCP/IP的通讯更像是打电话,连接上通了确认是自己拨叫的用户之后才能进行正常通话,更加安全合理. Qt中的TCP/IP流程如下: Qt中流程和普通的思路一样,只是封装成 ...

  7. JS添加和删除表格行

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. .NetCore3.0短网址项目

    Wei.TinyUrl 基于.NetCore3.0 + Mysql开发的短网址项目 项目地址:https://github.com/a34546/Wei.TinyUrl 演示效果: 快速开始 1. 修 ...

  9. python3相关

    with用法 with A as B: 语句 调用( A返回的类) 的__enter__方法 将该方法返回值赋予B, 执行完with语句块后, 调用类的__exit__方法

  10. 853. 有边数限制的最短路（Bellman-ford算法模板）

    给定一个n个点m条边的有向图,图中可能存在重边和自环, 边权可能为负数. 请你求出从1号点到n号点的最多经过k条边的最短距离,如果无法从1号点走到n号点,输出impossible. 注意:图中可能 存 ...