做网站的公司名称游戏推广拉人渠道
在 Web 开发中，经常会遇到需要将数据导出为文件的需求，例如将数据导出为 Excel 或 CSV 文件。今天，我们就来探讨如何使用 JavaScript 实现这一功能。
一、实现思路
我们通过 HTML 创建一个按钮，点击按钮时，触发 JavaScript 函数，将数据转换为 Excel 或 CSV 文件格式，并生成可下载的链接。
效果图：
二、代码实现
- HTML 部分：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/jquery-3.7.1.min.js"></script><title></title><style>.content {width: 300px;display: flex;justify-content: space-around;}.inport {background-color: skyblue;width: 100px;font-weight: 600;font-size: 20px;}.inport:hover {background-color: azure;cursor: pointer;}</style>
</head><body><div class="content"><h1>导出数据：</h1><button class="inport">一键导出</button></div><script>// 具体实现代码在下方</script>
</body></html>
在这个 HTML 结构中，我们定义了一个按钮，用于触发数据导出操作，并设置了相应的样式。
- JavaScript 部分：
$('.inport').click(function () {// 假设这是从接口获取的数据const jsonData = [{name: '张三',tel: 15836333325,email: '1903333356@qq.com'},{name: '李四',tel: 15833338325,email: '19033333@qq.com'},{name: '测试',tel: 158333333325,email: '测试.com'}];// 导出为Excel文件// 列标题let str = '<tr><td align="center">姓名</td><td>电话</td><td align="center">邮箱</td></tr>';// 循环遍历，每行加入tr标签，每个单元格加td标签for (let i = 0; i < jsonData.length; i++) {str += '<tr>';for (const key in jsonData[i]) {// 增加\t为了不让表格显示科学计数法或者其他格式str += `<td>${jsonData[i][key] + '\t'}</td>`;}str += '</tr>';}const worksheet = 'Sheet1'; // Worksheet名const uri = 'data:application/vnd.ms-excel;base64,';// 输出base64编码const base64 = (s) => window.btoa(unescape(encodeURIComponent(s)));// 下载的表格模板数据const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Conten-Type" content="text/html;charset=utf-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table cellpadding="100">${str}</table></body></html>`;// 获取当前日期const now = new Date();const year = now.getFullYear();const month = String(now.getMonth() + 1).padStart(2, '0');const day = String(now.getDate()).padStart(2, '0');const dateString = `${year}-${month}-${day}`;const link = document.createElement("a");link.href = uri + base64(template); //下载模板// 添加日期到文件名link.download = `数据表_${dateString}.xls`;link.click();// 导出为CSV文件// 列标题，逗号隔开，每一个逗号就是隔开一个单元格let str = `姓名,电话,邮箱\n`;for (let i = 0; i < jsonData.length; i++) {for (const key in jsonData[i]) {str += `(${jsonData[i][key] + '\t'},`; // 增加\t为了不让表格显示科学计数法或者其他格式}str += '\n';}const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); // encodeURIComponent解决中文乱码const link = document.createElement("a"); // 通过创建a标签实现link.href = uri;// 添加日期到文件名link.download = `json数据表_${dateString}.csv`;link.click();
});
在上述 JavaScript 代码中，我们首先定义了要导出的数据jsonData。然后分别实现了将数据导出为 Excel 和 CSV 文件的功能。
对于 Excel 文件，我们构建了一个 HTML 表格模板，将数据填充到表格中，然后将其转换为 Base64 编码，生成可下载的链接。
对于 CSV 文件，我们将数据按照 CSV 格式拼接成字符串，进行编码后生成可下载的链接。
三、总结
通过以上代码，我们实现了在 Web 页面中点击按钮将数据导出为 Excel 和 CSV 文件的功能。在实际应用中，我们可以根据具体需求对数据格式和文件名称进行调整，以满足不同的业务场景。希望这篇博客对你有所帮助，谢谢阅读！