javascript实现客户端兼容各浏览器创建csv并下载的方法

在JavaScript中，可以通过Blob对象和URL.createObjectURL()方法来生成CSV文件，并通过a标签的download属性实现文件的下载。下面是实现客户端兼容各浏览器创建CSV并下载的完整攻略：

准备工作

在代码中创建用户需要下载的CSV内容数据

var data = [
  ['姓名', '年龄', '性别'],
  ['张三', '18', '男'],
  ['李四', '20', '女'],
  ['王五', '22', '男']
];

创建Blob对象并生成URL

使用Blob对象可以根据给定的数据创建文件内容，Blob对象一般用于存储二进制数据。

function createCsv() {
  var csv = 'data:text/csv;charset=utf-8,';
  data.forEach(function(row) {
    row = row.join(',');
    csv += row + '\r\n';
  });
  return encodeURI(csv);
}

var blob = new Blob([createCsv()], { type: 'text/csv;charset=utf-8;' });
var url = URL.createObjectURL(blob);

创建a标签并模拟点击下载

var link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", "example.csv");
link.style.display = "none";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

使用上述步骤，就可以在客户端动态地创建CSV并下载了。但需要注意，以下两个问题：

1. 如果数据量比较大，直接将数据转化成CSV会占用大量内存，导致浏览器卡顿甚至崩溃。此时可采用流式下载的方式进行优化。
2. IE浏览器不支持下载属性的设置，需要通过浏览器特定方法实现文件下载。

以下是这个完整攻略中的两个示例：

示例1：数据流式下载

如果需要下载的数据很大，直接转化成CSV会占用大量内存，导致浏览器卡顿甚至崩溃。此时需要使用stream流式下载的方式，逐行将数据转化成CSV并进行下载。

function createCsv(callback) {
  var csv = '姓名, 年龄, 性别\r\n';
  var i = 0;

  function next() {
    if (i < data.length) {
      var row = data[i];
      csv += row.join(',') + '\r\n';
      i++;
      setTimeout(next, 0); // 下一行数据
    } else {
      callback(csv); // 所有数据已经被转换为csv格式
    }
  }

  next();
}

createCsv(function(csv) {
  var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  var url = URL.createObjectURL(blob);

  var link = document.createElement("a");
  link.setAttribute("href", url);
  link.setAttribute("download", "example.csv");
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

示例2：IE浏览器文件下载

IE浏览器不支持下载属性的设置，需要通过浏览器特定方法实现文件下载。

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

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  // IE浏览器
  window.navigator.msSaveOrOpenBlob(blob, 'example.csv');
} else {
  // 非IE浏览器
  var url = URL.createObjectURL(blob);

  var link = document.createElement("a");
  link.setAttribute("href", url);
  link.setAttribute("download", "example.csv");
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

以上就是完整的JavaScript实现客户端兼容各浏览器创建CSV并下载的方法攻略，使用者可以依照以上步骤完成相应需求的实现。