HTML+JavaScript 网页编辑表格（Exel+csv）文件并保存在本地

ALIM-MASTIK

已于 2024-01-03 15:41:15 修改

阅读量603

点赞数 7

文章标签： html javascript 前端

于 2024-01-03 15:39:45 首次发布

本文链接：https://blog.csdn.net/qq_61865289/article/details/135365531

版权

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>数据表</title>
	<style>
		body {
			background-image: url("{% static 'image/img.png' %}");
			background-repeat: no-repeat;
			background-size: cover;
			font-family: 'Microsoft Yahei', sans-serif;
		}
		table {
			border-collapse: collapse;
			margin: 30px auto;
			background-color: #fff;
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
		}
		th, td {

			padding: 10px;
			text-align: center;
			border: 1px solid #ccc;
		}
		th {
			background-color: #f2f2f2;
		}
		input[type="text"] {
			width: 80px;
			padding: 5px;
			margin: 5px;
			border-radius: 5px;
			border: none;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3) inset;
		}
		button {
			padding: 5px 10px;
			margin: 5px;
			border-radius: 5px;
			border: none;
			background-color: #4CAF50;
			color: #fff;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1 contenteditable="true" style="text-align: center;">数据表</h1>
	<table>
        <caption contenteditable="true">标题</caption>
		<thead>
			<tr>
				<th contenteditable="true">姓名</th>
				<th contenteditable="true">年龄</th>
				<th contenteditable="true">性别</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="text" id="name-1"></td>
				<td><input type="text" id="age-1"></td>
				<td><input type="text" id="gender-1"></td>
			</tr>
			<tr>
				<td><input type="text" id="name-2"></td>
				<td><input type="text" id="age-2"></td>
				<td><input type="text" id="gender-2"></td>
			</tr>
			<tr>
				<td><input type="text" id="name-3"></td>
				<td><input type="text" id="age-3"></td>
				<td><input type="text" id="gender-3"></td>
			</tr>
			<tr>
				<td><input type="text" id="name-4"></td>
				<td><input type="text" id="age-4"></td>
				<td><input type="text" id="gender-4"></td>
			</tr>
		</tbody>
	</table>
	<div style="text-align: center;">
		<button onclick="addRow()">添加行</button>
		<button onclick="addCol()">添加列</button>
		<button onclick="saveAsExel()">保存为Exel格式</button>
	</div>
	<script>
		// 添加行
		function addRow() {
			var table = document.querySelector('table');
			var lastRow = table.rows[table.rows.length - 1];
			var newRow = lastRow.cloneNode(true);
			var inputs = newRow.querySelectorAll('input');
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].value = '';
				inputs[i].id = inputs[i].id.slice(0, -1) + (table.rows.length - 1);
			}
			table.tBodies[0].appendChild(newRow);
		}

		// 添加列
		function addCol() {
			var table = document.querySelector('table');
			var th = document.createElement('th');
			var td = document.createElement('td');
			th.innerHTML = '<h1 contenteditable="true">新列</h1>';

			td.innerHTML = '<input type="text">';
			table.tHead.rows[0].appendChild(th);
			for (var i = 0; i < table.tBodies[0].rows.length; i++) {
				table.tBodies[0].rows[i].appendChild(td.cloneNode(true));
			}
		}

		// 保存为Exel格式
		function saveAsExel() {
			var table = document.querySelector('table');
			var fileName = 'data.xls';
			var content = '<table>';
			content += '<thead>' + table.tHead.innerHTML + '</thead>';
			content += '<tbody>' + table.tBodies[0].innerHTML + '</tbody>';
			content += '</table>';
			var blob = new Blob([content], {type: "application/vnd.ms-excel"});
			if (window.navigator.msSaveOrOpenBlob) {
				window.navigator.msSaveBlob(blob, fileName);
			} else {
				var link = document.createElement('a');
				link.href = URL.createObjectURL(blob);
				link.download = fileName;
				link.click();
			}
		}
	</script>
</body>
</html>