引言
在 Web 应用开发中,数据导出是一个常见且重要的功能。用户常常需要将网页上展示的数据以文件形式保存下来,以便后续分析、处理或分享。本文将详细介绍如何使用 HTML、CSS 和 JavaScript(结合 jQuery 库)实现一个简单的数据导出功能,用户点击按钮即可将数据导出为 Excel 文件。
功能概述
本示例实现了一个简单的数据导出功能,页面上有一个 “一键导出” 按钮,点击该按钮后,会将预设的 JSON 数据导出为 Excel 文件。导出的 Excel 文件包含列标题(姓名、电话、邮箱)和数据内容,文件名包含当前日期。
项目效果:
代码结构与实现细节
1. 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><!-- 后续 JavaScript 代码 --></body>
</html>
- HTML 头部:设置字符编码和视口,引入 jQuery 库,同时定义了页面的基本样式。
- 页面内容:包含一个
div.content
容器,其中有一个标题 “导出数据:” 和一个 “一键导出” 按钮。按钮的类名为inport
,用于后续绑定点击事件。
2. JavaScript 逻辑
$('.inport').click(function() {//jsonData=[{},{},{}] 接口给的数据const jsonData = [{name: '张三',tel: 1583333333325,email: '190333333956@qq.com'},{name: '李四',tel: 1583333333335,email: '13333333956@qq.com'},{name: '测试',tel: 15833333338325,email: '测试.com'}];// 列标题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();
});
数据准备
jsonData
:一个包含多个对象的数组,每个对象代表一条数据记录,包含name
(姓名)、tel
(电话)和email
(邮箱)三个属性。
数据格式化
str
:用于拼接 HTML 表格的字符串,首先添加列标题,然后遍历jsonData
数组,将每条数据记录的属性值添加到表格中。
Excel 模板生成
worksheet
:Excel 工作表的名称,这里设置为Sheet1
。uri
:指定数据类型为application/vnd.ms - excel
,并使用base64
编码。base64
函数:将字符串转换为base64
编码。template
:一个包含 Excel 表格模板的 HTML 字符串,将格式化后的数据插入到表格中。
文件名处理
- 获取当前日期,将其格式化为
YYYY - MM - DD
的字符串。 - 文件名中包含日期信息,格式为
数据表_YYYY - MM - DD.xls
。
下载文件
- 创建一个
<a>
标签,设置其href
属性为base64
编码的模板数据,download
属性为文件名。 - 模拟点击
<a>
标签,触发文件下载。
3. 导出 CSV 文件的备用方案
代码中还提供了导出 CSV 文件的备用方案,原理与导出 Excel 文件类似,只是不需要复杂的模板,直接将数据以逗号分隔的形式拼接成字符串,然后设置 href
属性为 data:text/csv
类型的数据,同样通过创建 <a>
标签触发下载。
// //导出.csv文件 (和excel文件差不多,就是不需要模板文件)// // 列标题,逗号隔开,每一个逗号就是隔开一个单元格// 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();
优化与拓展建议
- 数据来源:目前
jsonData
是预设的数据,可以将其替换为从后端接口获取的数据,实现动态数据导出。 - 错误处理:添加错误处理逻辑,例如在数据获取失败或编码转换出错时,给用户友好的提示信息。
- 样式优化:可以进一步优化 Excel 文件的样式,如调整列宽、字体颜色等。
总结
通过上述代码,我们实现了一个简单的数据导出功能,用户点击按钮即可将 JSON 数据导出为 Excel 文件。该功能主要利用了 JavaScript 的字符串拼接、base64
编码和 HTML5 的 <a>
标签的 download
属性。在实际项目中,可以根据需求对代码进行优化和拓展,以满足更复杂的业务场景。