JS兼容浏览器的导出Excel（CSV）文件的方法

作为一个网站的作者，要实现JS兼容浏览器的导出Excel（CSV）文件功能，可以采用以下步骤：

1. 准备数据

首先，需要准备好要导出的数据，以数组的形式存储。并根据具体需要从数据中提取出需要导出的字段，组成表头。

const data = [
  { name: '张三', age: 18, gender: '男', address: '北京市' },
  { name: '李四', age: 20, gender: '女', address: '上海市' },
  { name: '王五', age: 22, gender: '男', address: '深圳市' }
];

const columns = ['name', 'age', 'gender', 'address'];

2. 创建CSV内容

接下来，需要将数据组装成CSV格式的字符串。一般来说，CSV格式使用逗号分隔不同的列，每一行数据占据一行，例如：

name,age,gender,address
张三,18,男,北京市
李四,20,女,上海市
王五,22,男,深圳市

下面是一个示例代码，可将数据组装成CSV格式的字符串。

let csvContent = '';
// 添加表头
csvContent += columns.join(',') + '\n';
// 添加行数据
data.forEach((item) => {
  const values = columns.map((column) => item[column]);
  csvContent += values.join(',') + '\n';
});

3. 导出CSV文件

接下来，需要将CSV字符串导出为文件。因为不同浏览器对于文件导出的支持程度不同，因此需要根据浏览器类型使用不同的导出方法。

一般来说，可以使用HTML5新增的Blob对象来实现浏览器的文件导出。其中，对于不支持Blob对象的浏览器（如IE），需要使用IE的ActiveXObject对象来实现导出。

下面是一个示例代码，可实现兼容不同浏览器的文件导出。

if (window.navigator.msSaveBlob) {
  // for IE
  const blobObject = new Blob([csvContent]);
  window.navigator.msSaveBlob(blobObject, 'data.csv');
} else {
  // for other browsers
  const downloadLink = document.createElement('a');
  downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
  downloadLink.download = 'data.csv';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

4. 完整示例

下面是一个完整的示例代码，可实现兼容不同浏览器的文件导出，并且可以通过一个按钮来触发该功能。

<button id="export-btn">导出CSV</button>

<script>
const data = [
  { name: '张三', age: 18, gender: '男', address: '北京市' },
  { name: '李四', age: 20, gender: '女', address: '上海市' },
  { name: '王五', age: 22, gender: '男', address: '深圳市' }
];
const columns = ['name', 'age', 'gender', 'address'];

function exportCSV() {
  let csvContent = '';
  // 添加表头
  csvContent += columns.join(',') + '\n';
  // 添加行数据
  data.forEach((item) => {
    const values = columns.map((column) => item[column]);
    csvContent += values.join(',') + '\n';
  });

  if (window.navigator.msSaveBlob) {
    // for IE
    const blobObject = new Blob([csvContent]);
    window.navigator.msSaveBlob(blobObject, 'data.csv');
  } else {
    // for other browsers
    const downloadLink = document.createElement('a');
    downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
    downloadLink.download = 'data.csv';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }
}

document.getElementById('export-btn').addEventListener('click', exportCSV);
</script>

以上就是JS兼容浏览器的导出Excel（CSV）文件的方法的完整攻略，通过以上步骤，可以实现在各个浏览器上兼容的文件导出功能。