javascript导出csv文件（excel）的方法示例

下面是关于“javascript导出csv文件（excel）的方法示例”的完整攻略：

一、CSV文件格式介绍

CSV（Comma-Separated Values）就是指逗号分隔符，通常是一种保存矩阵数据的文件格式。每行记录表示一行，以逗号作为分隔符，不同列数据存在不同位置，可以通过表格对齐的方式方便地分辨出来。

例如：下面是一个CSV文件的模板：

姓名,学号,成绩
小明,201701,98
小红,201702,95
小丽,201703,100

在具体导出CSV文件时，我们需要通过JavaScript来创建并下载这个文件。

二、创建CSV文件内容

首先，我们需要准备好我们要导出的数据，可以是数组、JSON格式等。以一个数组为例，它长这样：

let data = [
  ['姓名', '学号', '成绩'],
  ['小明', '201701', '98'],
  ['小红', '201702', '95'],
  ['小丽', '201703', '100']
];

可以看到，这个数组就是符合CSV格式的。接下来，我们需要将它转换为符合CSV格式的字符串。

三、将数据转换为CSV格式的字符串

我们可以通过循环遍历数据，将数组中的每一个元素用逗号隔开，并且每行最后再加上一个换行符，最后将这些字符串累加起来，以形成一个文本字符串。这个过程可以使用以下代码完成：

let csvContent = '';
data.forEach(function(rowArray) {
  let row = rowArray.join(',');
  csvContent += row + '\r\n';
});

这里用到了join()方法将数组中每一项用逗号隔开，forEach()方法遍历整个数组，csvContent是保存最终文本的变量。

四、下载CSV文件

最后一步是将数据下载为CSV文件。这个过程需要使用到一个伪造的<a>标签来实现。具体流程为：

1. 我们需要先创建一个Blob对象，它代表了一份二进制数据（通常是一个文件），并设置这个对象的type为text/csv，表示文本内容的MIME类型为CSV格式。

let blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

1. 创建一个伪造的链接标签，将这个Blob对象下载为一个CSV文件。

let link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = '学生成绩单.csv';
link.style.display = 'none';
document.body.appendChild(link);
link.click();

URL.createObjectURL(blob)创建一个地址，将这个地址作为href属性值，link.download表示在下载时会下载一个名为“学生成绩单.csv”的文件，link.style.display = 'none'表示这个链接在页面上是隐藏起来的，最后使用link.click()方法自动触发下载过程。

五、完整示例

下面是一个完整的示例代码，包括了准备数据、转换数据、下载文件等步骤：

let data = [
  ['姓名', '学号', '成绩'],
  ['小明', '201701', '98'],
  ['小红', '201702', '95'],
  ['小丽', '201703', '100']
];

let csvContent = '';
data.forEach(function(rowArray) {
  let row = rowArray.join(',');
  csvContent += row + '\r\n';
});

let blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

let link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = '学生成绩单.csv';
link.style.display = 'none';
document.body.appendChild(link);
link.click();

六、示例说明

下面我们将介绍两个基于上述代码的示例，来说明如何使用它来导出不同格式的CSV文件。

示例1：通过JSON数据导出CSV文件

以下是一个以JSON格式表示的数据：

let data = [
  { name: '小明', student_id: '201701', score: 98 },
  { name: '小红', student_id: '201702', score: 95 },
  { name: '小丽', student_id: '201703', score: 100 }
];

首先，我们需要将JSON数据转换成符合CSV格式的二维数组，代码如下：

let data = [
  ['姓名', '学号', '成绩'],
  ...(function() {
    let arr = [];
    data.forEach(function(item) {
      arr.push([item.name, item.student_id, item.score]);
    });
    return arr;
  })()
];

这里使用了扩展运算符...将第一行的中文标题与后面的数据数组合并。forEach()遍历整个JSON数据，将每个数据项转换成一个数组。

接下来就可以按照上面的流程使用这个数组来生成CSV文件。

示例2：将HTML表格转换为CSV文件

以下是一个HTML表格：

<table>
  <tr>
    <th>姓名</th>
    <th>学号</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>201701</td>
    <td>98</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>201702</td>
    <td>95</td>
  </tr>
  <tr>
    <td>小丽</td>
    <td>201703</td>
    <td>100</td>
  </tr>
</table>

我们可以使用document.querySelectorAll()方法获取这个表格的所有<tr>元素，然后遍历每个元素的子元素<td>，将其中的纯文本内容保存为一个数组，最后将这些数组组合成CSV数据格式，代码如下：

let data = [
  ['姓名', '学号', '成绩'],
  ...(function() {
    let arr = [];
    document.querySelectorAll('table tr').forEach(function(row) {
      let rowArray = [];
      row.querySelectorAll('td').forEach(function(cell) {
        rowArray.push(cell.innerText);
      });
      arr.push(rowArray);
    });
    arr.shift(); // 删除第一行的表头
    return arr;
  })()
];

这里使用了CSS选择器table tr和td获取所有的行和单元格。遍历时，对于每一行，使用querySelectorAll()方法获取这一行的所有单元格，使用forEach()遍历处理每个单元格的文本。最后将遍历后得到的二维数组用扩展运算符合并起来。

然后，按照上面的流程使用这个数组来生成CSV文件。

以上就是对“javascript导出csv文件（excel）的方法示例”的详细讲解，包括CSV文件格式介绍、数据转换、文件下载以及两个示例。希望对你有帮助。