javascript 实现纯前端将数据导出excel两种方式

当我们需要将前端的数据导出为Excel文件时，我们可以采用两种方式：

1. 使用第三方库

我们可以使用js库如FileSaver.js和xlsx.js，这两个库可以帮助我们实现导出Excel文件的功能。

1.1 安装和引入FileSaver.js和xlsx.js

你可以从libraries中下载这两个库，将他们引入到你的HTML文件内。

<script src="/libraries/FileSaver.js"></script>
<script src="/libraries/xlsx.js"></script>

1.2 创建Excel文件

我们需要将数据转化为二维数组，并使用SheetJS库创建一个工作簿：

// 例如，我们有一个数据对象如下：
var data = [
  {name: "John", city: "NYC", age: 25},
  {name: "Lisa", city: "LA", age: 30}
];

// 将这个数据对象转化为一个二维数组
var dataArray = [];
dataArray.push(["Name", "City", "Age"]);
for(var i=0; i<data.length; i++) {
  dataArray.push([data[i].name, data[i].city, data[i].age]);
}

// 创建工作簿
var wb = {
  SheetNames: ['Data'],
  Sheets: {},
  Props: {}
};
wb.Sheets['Data'] = XLSX.utils.aoa_to_sheet(dataArray);

1.3 导出Excel文件

最后，我们可以使用FileSaver.js将Workbook对象转化为二进制文件，并导出它：

// Convert the workbook object to an array buffer
var outputBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });

// Save the binary file using FileSaver.js
var blob = new Blob([outputBuffer], {type: 'application/octet-stream'});
saveAs(blob, 'data.xlsx');

2. 使用前端纯代码

实现前端纯代码导出Excel的方式与使用第三方库的过程类似，只是需要手动创建Excel表格：

2.1 创建Excel文件

var data = [
  {name: "John", city: "NYC", age: 25},
  {name: "Lisa", city: "LA", age: 30}
];

var table = document.createElement("table");

// 表头
var headRow = table.insertRow();
var headCell = headRow.insertCell();
headCell.innerHTML = "<b>Name</b>";
var headCell = headRow.insertCell();
headCell.innerHTML = "<b>City</b>";
var headCell = headRow.insertCell();
headCell.innerHTML = "<b>Age</b>";

// 其他行
for (var i = 0; i < data.length; i++) {
  var row = table.insertRow();
  var cell1 = row.insertCell();
  cell1.innerHTML = data[i].name;
  var cell2 = row.insertCell();
  cell2.innerHTML = data[i].city;
  var cell3 = row.insertCell();
  cell3.innerHTML = data[i].age;
}

2.2 导出Excel文件

使用以下代码将表格转化为Blob对象并导出Excel文件：

var wb = new Blob([table.outerHTML], {type:'application/vnd.ms-excel'});
var a = document.createElement('a');

a.download = 'data.xls';
a.href = window.URL.createObjectURL(wb);
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

这就是两种实现前端纯代码导出Excel的方式，分别使用了第三方库和前端纯代码实现。你可以根据你的需要选择其中一种方式，来实现将前端的数据导出为Excel文件。