从具有输入字段的动态HTML表格制作Excel工作表可以通过以下步骤实现:
<form>
、<table>
、<input>
等标签来定义表单结构和输入字段。以下是一个示例代码,演示如何从具有输入字段的动态HTML表格中制作Excel工作表:
<!DOCTYPE html>
<html>
<head>
<title>HTML表格导出Excel</title>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
<form id="myForm">
<table>
<tr>
<td><input type="text" name="name" placeholder="姓名"></td>
<td><input type="text" name="age" placeholder="年龄"></td>
</tr>
<tr>
<td><input type="text" name="email" placeholder="邮箱"></td>
<td><input type="text" name="phone" placeholder="电话"></td>
</tr>
</table>
<button type="button" onclick="exportToExcel()">导出Excel</button>
</form>
<script>
function exportToExcel() {
var form = document.getElementById("myForm");
var formData = new FormData(form);
var data = {};
for (var pair of formData.entries()) {
data[pair[0]] = pair[1];
}
var workbook = XLSX.utils.book_new();
var worksheet = XLSX.utils.json_to_sheet([data]);
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
var excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
saveAsExcel(excelBuffer, "data.xlsx");
}
function saveAsExcel(buffer, filename) {
var blob = new Blob([buffer], { type: "application/octet-stream" });
var url = URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = url;
link.download = filename;
link.click();
}
</script>
</body>
</html>
在上述示例中,我们使用了SheetJS库来处理Excel文件的导出。通过点击"导出Excel"按钮,表单数据将被收集并转换为Excel文件,然后以"data.xlsx"文件名下载到本地。
请注意,这只是一个简单的示例,实际应用中可能需要根据需求进行适当的修改和扩展。另外,腾讯云相关产品和产品介绍链接地址可以根据具体需求和场景进行选择和提供。
领取专属 10元无门槛券
手把手带您无忧上云