一.csv与xlsx格式基本介绍
 
    csv即comma seperate values - 逗号分隔值，文件以纯文本形式来存储表格数据，它可以由任意数目的记录组成，记录之间通过某种换行符来分隔如 ’\r\n’，而每条记录由字段组成，字段之间的分隔符一般通过逗号来分隔即  ’,’，因此csv是一种比较简单的文件格式，在编辑器中打开如下所示
   
    
    xlsx是Microsoft Excel 2007之后的扩展名，其本身是一种新的基于XML的压缩文件，相对于传统的xls文件占用空间更小，在后缀名之后添加.zip即可解压缩，如下所示：
 
二. 前端导出csv格式文件
 
     csv格式 - csv格式本身比较简单，所以前端只需要对数据按照格式（记录之间通过换行符分隔，记录中的字段之间通过逗号分隔）进行处理即可，一般不需要引入额外的库，基本的使用方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<button id="btn">下载</button>
<a id="downloadCsv"></a>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
  let headers = ['时段', '2018-08-01', '2018-08-01', '2018-08-01'];
  let dataSource = [
    ['00时', 345, 65, 8],
    ['06时', 23, 56, 89],
    ['12时', 21, 4, 7],
    ['18时', 67, 9, 34],
  ];
  let csv = '\uFEFF';
  csv += headers.join(',') + '\r\n';
  dataSource.forEach( (record) => {
    csv += (record.join(',') + '\r\n');
  });
  const blob = new window.Blob([csv], { type: 'text/csv,charset=UTF-8' });
  const downloadCsv = document.getElementById('downloadCsv');
  downloadCsv.href = window.URL.createObjectURL(blob);
  downloadCsv.click();
  window.URL.revokeObjectURL(blob);
})
</script>
</body>
</html>
 
值得注意的有以下几点：
  1. 在csv文件的开头需要添加BOM，这里使用\uFEFF表示此文件使用UTF-16进行编码
  2. 在创建Blob时，第一个参数必须是数组
  3. 在下载完成最后，需要及时清除Blob占用的内存
可以在https://jsfiddle.net/veh7asqk/1/查看效果
 
 
 
三.前端导出excel格式文件
    excel格式文件比较复杂，在实现上一般可以引用第三方库https://github.com/sheetjs/js-xlsx，它可以简化xlsx文件的各种操作：读取、预览、web sql查询、编辑、导出，可以访问https://sheetjs.com/opensource查看更多;这里主要陈述如何导出xlsx类型的文件
    打开一个excel表，可以发现其主要的格式如下：
      A     B      C     D      E
1    A1   B1    C1   D1    E1
2    A2   B2    C2   D2    E2
3    A3   B3    C3   D3    E3
4    A4   B4    C4   D4    E4
    所以前端对于数据的处理过程就是将数据按照上面的格式进行匹配，一个简单的例子如下所示：
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- XLSX -->
  <!-- fileSaver saveAs -->
</head>
<body>
  <button id="btn"/>下载</button>
  <script>
  function createWorkSheet (XLSX, tableCols, tableData) {
    var EMPTY_XSLX_BASE64 = '';
    var workbook = XLSX.read(EMPTY_XSLX_BASE64, { type: 'base64' });
    var sheets = {
    Sheet1: {},
    };
    var sheetNames = ['Sheet1'];
    var idx = 0;
    var colNum = tableCols.length;
    var rowNum = tableData.length;
    // 输入表头
    for (idx = 0; idx < colNum; idx++) {
      var title = tableCols[idx];
      sheets.Sheet1[String.fromCharCode(65 + idx) + '1'] = {
        t: 's',
        v: title.name,
      };
    }
    // 插入每行的数据值
    for (let n = 0; n < rowNum; n++) {
      let key = tableCols[0].key;
      let v = tableData[n][key] + '';
      sheets.Sheet1[String.fromCharCode(65) + (n + 2)] = {
        t: 'n',
        v: v,
      };
    }
    for (let n = 0; n < rowNum; n++) {
      let key = tableCols[1].key;
      let v = tableData[n][key] + '';
      sheets.Sheet1[String.fromCharCode(65 + 1) + (n + 2)] = {
        t: 's’,  
        v: v,
      }
    }
    for (let n = 0; n < rowNum; n++) {
      for (idx = 2; idx < colNum; idx++) {
        let key = tableCols[idx].key;
        let v = tableData[n][key];
          sheets.Sheet1[String.fromCharCode(65 + idx) + (n + 2)] = {
            t: 'n',
            v: v,
        };
      }
    }
    sheets.Sheet1['!ref'] = 'A1:' + String.fromCharCode(65 + colNum - 1) + (rowNum + 1);
    workbook.Sheets = sheets;
    workbook.SheetNames = sheetNames;
    return workbook;
  }
 
  function a2ab (s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i !== s.length; ++i) {
      view[i] = s.charCodeAt(i) & 0xFF;
    }
    return buf;
  }
 
  const headers = [
    {
      name: '序号',
      key: 'No',
    },
    {
      name: '应用名称',
      key: 'AppName',
    },
    {
      name: '日活跃用户数(万)',
      key: 'DAU',
    },
    {
      name: '月数(万)',
      key: 'MAU',
    }
  ];
 
  const dataSource = [
    {
      No: 1,
      AppName:  ‘a',
      DAU: 17900,
      MAU: 50000,
    },
    {
      No: 2,
      AppName:  ‘b',
      DAU: 12500,
      MAU: 40000,
    },
    {
      No: 3,
      AppName:  ‘c',
      DAU: 4400,
      MAU: 15000,
    },
    {
      No: 4,
      AppName:  ‘d',
      DAU: 4800,
      MAU: 17000,
    },
  ];
 
  function download (fileName) {
    let wb = createWorkSheet(XLSX, headers, dataSource);
    let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'binary'});
    saveAs(new Blob([a2ab(wbout)], {type: 'application/octet-stream'}), fileName);
  }
  let btn = document.getElementById('btn');
  btn.addEventListener('click', function () {
  const fileName = 'example.xlsx';
    download(fileName);
  })
</script>
</body>
</html>
这里导出的是一个工作簿，工作簿中包含多个表，所以通过这种方式可以输出多个表从而方便用户查看；另外，在格式化过程中可以针对导出表格式需要来规定每个字段的type来做类型的限定，保证类型的确定性以及减少前端相应工作量；
可以在https://jsfiddle.net/q8dgvL3w/2/查看效果
 
 
四. 总结
    csv文件格式简单，在前端实现上相对简单，无需引入额外的库文件，对于一般的表格导出均可满足需求；xlsx文件格式复杂，需要引用第三方库文件进行处理，其可以文件预览、类型限定、SQL查询、内容包含图表、一个工作簿中包含多个表等，使用场景更大。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

csv与xlsx导出的更多相关文章

  1. Laravel 5 中使用 Laravel Excel 实现 Excel/CSV 文件导入导出功能

    1.简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和导出. 该 ...

  2. 在 Laravel 5 中使用 Laravel Excel 实现 Excel/CSV 文件导入导出功能

    1.简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel ,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和 导出  ...

  3. Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解

    1.简介 本文主要给大家介绍了关于Laravel 5用Laravel Excel实现Excel/CSV文件导入导出的相关内容,下面话不多说了,来一起看看详细的介绍吧. Laravel Excel 在 ...

  4. Data_r_and_w(csv,json,xlsx)

    import osimport sysimport argparsetry:    import cStringIO as StringIOexcept:    import StringIOimpo ...

  5. MySql csv文件导入导出

    一.导出到csv(本地导出) 通过mysql客户端shell连接到服务器,选择使用的数据库,输入sql代码: select * from test_info into outfile '/tmp/te ...

  6. CSV文件导入导出MySQL

    使用SQLyog 工具导入文件数据到MySQL: Excel文件导入导出: 需要驱动:Microsoft Office 2007驱动 导入需要注意的问题:1.Excel里数值列,默认导入会变成浮点型. ...

  7. thinkphp5 csv格式导入导出（多数据处理）

    关于csv文件格式的导出导入个人见解 先上代码: <?php namespace think; class Csv { /** * 导出csv文件 * @param $list 数据源 * @p ...

  8. 完整代码：安卓小软件“CSV联系人导入导出工具”

    完整代码:安卓小软件"CSV联系人导入导出工具" 开发了一个安卓小软件"CSV联系人导入导出工具",欢迎测试.本软件可以帮你快速备份和恢复联系人,不用担心号码遗 ...

  9. 开发了一个安卓小软件“CSV联系人导入导出工具”，欢迎测试

    开发了一个安卓小软件"CSV联系人导入导出工具",欢迎测试.本软件可以帮你快速备份和恢复联系人,不用担心号码遗失,软件操作简单,使用方便. 下载地址: 百度网盘:https://p ...

随机推荐

  1. 《修炼之道:.NET开发要点精讲》读书笔记（三）

    后几章的习题 1.异步调用开始后,什么时候才能使用异步执行的结果? A:最好在EndInvoke()方法返回之后才能使用异步执行的结果,其它时候不能保证异步调用已完成. 2.委托的异步调用开始后(即调 ...

  2. centos 7.3 安装配置python3.6.1

    1.先安装一些我遇到的依赖问题(如果有依赖问题按提示安装): yum install xz gcc zlib zlib-devel 2.官网下载源码包 地址:https://www.python.or ...

  3. Redis学习笔记：与SpringBoot结合使用

    首先需要在pom文件中导入相应的Redis依赖(版本可以会变化,下面坐标也可能会变化) <dependency> <groupId>org.springframework.bo ...

  4. Winform .NET 利用NPOI导出大数据量的Excel

    前言:公司让做一个导出数据到Excel的小工具,要求是用户前端输入sql语句,点击导出按钮之后,将数据导出到Excel,界面如图所示:文件下端显示导出的进度 遇到的问题: 1.使用NPOI进行Exce ...

  5. NPOI颜色对照表

    颜色对照表:颜色 测试 Class名称 short        Test颜色 Black 8 Test颜色 Brown 60 Test颜色 Olive_Green 59 Test颜色 Dark_Gr ...

  6. mysql 字段指定值靠前排序方法，多字段排序排序方法

    背景:SEO下选择某查询条件 查询展示信息为装修设计师以及设计师作品.设计师原型设计为:选择某风格 例如:简约,则列表出现拥有简约风格的设计师信息以及该设计师类型为简约的作品(3条靠前记录) 浏览原型 ...

  7. list常用方法

    1.切片: ①.顾头不顾尾,从头开始取,但不包括最后一个. ②.从左向右数为正,从零开始,从右开始为负,从-1开始 如: names=['1','2','3'] ames[-1]与names[2]效果 ...

  8. Javascript中表达式和语句的区别

    一.表达式:一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数. 以下例子就是表达式: a=35: b=1+a; a=function (){return 6}: b ...

  9. 初学者必看的文章：在VM12中安装 RedHat RHEL7.2  系统的详细步骤：看我如何操纵RHEL系统

    一.开始安装 1)新建虚拟机 RHEL7.2 2)成功引导系统--开机出现此画面 Install Red Hat EnterpriseLinux 7.2  安装RHLE7.2 操作系统 Test th ...

  10. php倒计时

    <form name="form1"> <div align="center" align="center"> &l ...