### 使用JavaScript库：js-xlsx 和 FileSaver.js
对于前端直接生成并保存 Excel 文件的情况，可以使用 `xlsx` 库来创建工作簿，并结合 `FileSaver.js` 来触发浏览器进行本地存储。
javascript
// 引入所需JS库
import XLSX from 'xlsx';
import saveAs from 'file-saver';
// 假设我们有一个名为data的数据数组，其中每个元素代表一行记录
let data = [
['姓名', '年龄'],
['张三', '20' ],
// 更多行...
];
// 将数据转换成 workbook 对象
const wb = XLSX.utils.book_new();
wb.SheetNames.push('Sheet1');
wb.Sheets['Sheet1'] = XLSX.utils.aoa_to_sheet(data);
// 创建一个 Blob 对象表示 excel 文件内容
var blob = new Blob([s2ab(XLSX.write(wb, {bookType:'xls', type: 'binary'}))], {
type: "application/vnd.ms-excel"
});
// 利用 FileSaver.js 提供的函数将其保存到用户的设备上
saveAs(blob, "output.xls");
function s2ab(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;
}
### CSV 数据导出
相较于Excel更为简单的是CSV导出，在不借助第三方库的情况下也可以轻松实现：
javascript
// 基于上面定义的相同"data"变量
let csvContent = 'data:text/csv;charset=utf-8,'
+ data.map(e => e.join(',')).join('\n');
// 创建隐藏链接用于模拟点击下载动作
let encodedUri = encodeURI(csvContent);
let link = document.createElement("a");
link.setAttribute("href",(encodedUri));
link.setAttribute("download","my_data.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
### 后台处理与返回文件流
另一种方法是通过后端程序(比如Node.js/Java/.NET等)动态生成这些文件并将它们作为HTTP响应发送回客户端。这样做的好处是可以应对大数据量以及复杂样式的需求。
例如在 Node.js 中利用 express 框架和服务端模块 such as `excel-export` 或者操作csv字符串构建http response:
javascript
app.get('/export-to-csv', function(req, res){
let filename = 'report.csv';
let fields = ['name','age'];
let rows = [/*...your data here ...*/];
const csvStream = createCsvWriter.createObjectCsvStringifier({ header });
let csvData = '';
csvStream.stringifyRecords(rows)
.then((result:string)=>{ csvData=result });
res.setHeader(
"content-disposition",
"attachment;filename=" + filename
);
res.set("Content-Type", "text/csv");
res.send(Buffer.from(csvData));
});
总结来说，无论是在前端还是后台实现从 HTML 导出数据至不同的文件格式（包括但不限于 Excel 及 CSV），关键在于正确地构造相应的内容体并通过合适的 HTTP 头部指示用户代理行为以达到预期的效果——即让用户能够成功下载所请求的数据文件。