网站首页 > 知识剖析 正文
本人业余爱好编写小工具，20年前用VB写，后来用易语言写，2023年了解过ChatGPT用于写代码，但一直没有尝试过，主要是懒！今年初DeepSeek的爆火，带动了一大批AI应用，也终于尝试起了DeepSeek+Trae的组合编程方式，结论就是：不懂编程的人已经可用AI轻松编写出实用工具。
近期的代码文章
工作中经常会对Excel文件进行合并，想着手工其实也花不了太多时间，就没有尝试自己写工具来完成（给懒找个理由），当然在大量裁人的这个工作环境下，也只有依靠工具来提高工作效率，勉强抵销人员减少的压力，牛马人的悲哀！实际工具出来后确实轻松多了。
Python版开发了6小时，主要是与AI交互没经验，走了很多弯路，python代码编写容易且代码量少，生成exe和分享确实太难，可能是我还没找到方法，最终放弃这种方案。
Python版切换为HTML版用了1 小时，多种架构和不同的编程环境能顺利切换，完全依靠DeepSeek+Trae，以前对我来说是不敢想的事，现在轻松完成，由于Html+javascript可以通过浏览器直接解释执行，不用打包成exe，分享也只需要建一个网络连接或者直接分享这个文件，用浏览器打开就可运行，方便使用。
Excel文件合并工具-Htmll的功能不介绍了，说一下怎么使用吧！
1、把文末的代码块复制，粘贴到记事本中，并另存为 Excel文件合并工具.html
2、双击《Excel文件合并工具.html》，默认的浏览器会打开该文件，打开后的界面如下图
3、如果第一步也不会弄，那么可以试试我自建的分享链接，点击打开就可以使用：
PS：之前用手机发，不知道怎么分享代码，看到别人可以发代码，才发现电脑版可以用文章把代码分享出来，希望对有需要的人有所帮助。
【附Html源代码】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel文件合并工具</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
max-width: 1000px;
margin: 0 auto;
}
.container {
display: flex;
gap: 20px;
}
.left-panel, .right-panel {
flex: 1;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
padding: 8px 16px;
margin: 5px;
cursor: pointer;
}
.file-list {
margin: 10px 0;
}
.file-item {
display: flex;
justify-content: space-between;
margin: 5px 0;
}
/* 删除重复的<style>标签 */
tr.selected {
background-color: #e0f7e0 !important; /* 浅绿色背景 */
}
@media (max-width: 768px) {
.container {
flex-direction: column;
gap: 15px;
}
.left-panel, .right-panel {
width: 100%;
}
}
/* 新增选择器 */
input[type="file"] {
padding: 6px;
border: 1px solid #ddd;
border-radius: 4px;
}
button:hover {
opacity: 0.9;
}
/* 优化表格选择器 */
#mappingTable tr:hover,
#sourceTable tr:hover {
background-color: #f5f5f5;
}
/* 拖拽样式 */
#mappingTable tr {
cursor: move;
user-select: none;
-webkit-user-drag: element;
}
#mappingTable tr.dragging {
opacity: 0.5;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<h1>Excel文件合并工具</h1>
<div>
<input type="file" id="excelFiles" multiple accept=".xlsx, .xls" />
<button onclick="loadFiles()">加载文件</button>
<label><input type="checkbox" id="includeSubfolders" checked /> 包含子文件夹</label>
<button onclick="addMapping()">添加映射</button>
<button onclick="removeMapping()">删除映射</button>
<button onclick="mergeFiles()">合并文件</button>
<button onclick="saveConfig()">保存配置</button>
<button onclick="loadConfig()">加载配置</button>
</div>
<div class="container">
<div class="left-panel">
<h3>列映射 <span style="font-size: 0.8em; color: #666;">(拖动可改变顺序)</span></h3>
<table id="mappingTable">
<thead>
<tr>
<th>合并后字段名</th>
<th>合并前字段名</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 拖拽排序功能
document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('mappingTable');
let draggedItem = null;
// 设置行可拖动
table.addEventListener('dragstart', function(e) {
if (e.target.tagName === 'TR') {
draggedItem = e.target;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', draggedItem);
setTimeout(() => {
draggedItem.style.display = 'none';
}, 0);
}
});
table.addEventListener('dragover', function(e) {
e.preventDefault();
const targetRow = e.target.closest('tr');
if (targetRow && targetRow !== draggedItem) {
const rect = targetRow.getBoundingClientRect();
const midPoint = rect.top + rect.height / 2;
if (e.clientY < midPoint) {
table.insertBefore(draggedItem, targetRow);
} else {
table.insertBefore(draggedItem, targetRow.nextSibling);
}
}
});
table.addEventListener('dragend', function() {
if (draggedItem) {
const targetName = draggedItem.cells[0].textContent;
const wasSelected = draggedItem.classList.contains('selected');
draggedItem.style.display = '';
draggedItem = null;
updateColumnOrder();
// 恢复选中状态
if (wasSelected) {
const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
if (row.cells[0].textContent === targetName) {
row.classList.add('selected');
}
});
}
}
});
// 删除列映射
function removeMapping() {
const selectedRows = document.querySelectorAll('#mappingTable tbody tr.selected');
if (selectedRows.length === 0) {
alert('请先选择要删除的映射');
return;
}
// 确认删除
if (!confirm(`确定要删除选中的${selectedRows.length}个映射吗？`)) {
return;
}
// 先收集所有要删除的目标名称
const targetsToDelete = Array.from(selectedRows).map(row =>
row.cells[0].textContent
);
// 然后统一删除
targetsToDelete.forEach(target => {
delete columnMapping[target];
});
refreshMappingTable();
refreshSourceTable();
}
// 更新列映射顺序
function updateColumnOrder() {
const rows = table.querySelectorAll('tbody tr');
const newMapping = {};
// 先处理表格中存在的行
rows.forEach(row => {
const targetName = row.cells[0].textContent;
if (columnMapping[targetName]) {
newMapping[targetName] = {
sources: [...columnMapping[targetName].sources],
allowNull: columnMapping[targetName].allowNull
};
}
});
// 同步更新columnMapping
columnMapping = newMapping;
console.log('列映射顺序已更新:', columnMapping);
refreshMappingTable(); // 刷新表格以反映新顺序
return true; // 返回成功状态
}
// 加载配置后重新初始化拖拽功能
function loadConfig() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
try {
const config = JSON.parse(e.target.result);
columnMapping = config.columnMapping || {};
refreshMappingTable();
refreshSourceTable();
makeRowsDraggable(); // 重新初始化拖拽功能
} catch (error) {
console.error('加载配置出错:', error);
alert('加载配置失败，请检查文件格式');
}
};
reader.readAsText(file);
};
input.click();
}
// 为表格行添加draggable属性和事件监听
function makeRowsDraggable() {
const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
row.setAttribute('draggable', 'true');
// 移除旧的事件监听器
row.removeEventListener('dragstart', handleDragStart);
row.removeEventListener('dragover', handleDragOver);
row.removeEventListener('dragend', handleDragEnd);
// 添加新的事件监听器
row.addEventListener('dragstart', handleDragStart);
row.addEventListener('dragover', handleDragOver);
row.addEventListener('dragend', handleDragEnd);
});
}
// 拖拽开始事件处理
function handleDragStart(e) {
e.dataTransfer.setData('text/plain', e.target.dataset.targetName || '');
e.target.classList.add('dragging');
}
// 拖拽悬停事件处理
function handleDragOver(e) {
e.preventDefault();
const draggingElement = document.querySelector('.dragging');
if (draggingElement && e.target.parentNode.tagName === 'TR') {
const targetRow = e.target.closest('tr');
const tableBody = targetRow.parentNode;
const rows = Array.from(tableBody.querySelectorAll('tr'));
const draggingIndex = rows.indexOf(draggingElement);
const targetIndex = rows.indexOf(targetRow);
if (draggingIndex !== targetIndex) {
if (draggingIndex < targetIndex) {
tableBody.insertBefore(draggingElement, targetRow.nextSibling);
} else {
tableBody.insertBefore(draggingElement, targetRow);
}
}
}
}
// 拖拽结束事件处理
function handleDragEnd(e) {
e.target.classList.remove('dragging');
updateColumnOrder(); // 更新列映射顺序
}
// 初始化时设置行可拖动
makeRowsDraggable();
// 监听表格内容变化，重新设置行可拖动
const observer = new MutationObserver(makeRowsDraggable);
observer.observe(table, { childList: true, subtree: true });
});
</script>
</div>
<div class="right-panel">
<h3>可选字段 <span style="font-size: 0.8em; color: #666;">(单击选择，支持多选)</span></h3>
<table id="sourceTable">
<thead>
<tr>
<th>字段名</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
// 全局变量
let allColumns = new Set();
let columnMapping = {};
let excelFiles = [];
let fileData = {};
// 加载Excel文件
// 删除updateFileList函数
function loadFiles() {
const fileInput = document.getElementById('excelFiles');
const files = fileInput.files;
if (files.length === 0) {
alert('请先选择Excel文件');
return;
}
excelFiles = Array.from(files);
scanExcelFiles(); // 直接调用扫描函数
}
// 扫描Excel文件获取列名
function scanExcelFiles() {
allColumns = new Set();
fileData = {};
const includeSubfolders = document.getElementById('includeSubfolders').checked;
const promises = excelFiles.map(file => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function(e) {
try {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// 遍历所有工作表
workbook.SheetNames.forEach(sheetName => {
const sheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: "" });
if (jsonData.length > 0) {
// 自动检测表头行
let headerRow = 0;
let maxCols = 0;
for (let i = 0; i < Math.min(5, jsonData.length); i++) {
const nonEmpty = jsonData[i].filter(cell => cell !== "").length;
if (nonEmpty > maxCols) {
maxCols = nonEmpty;
headerRow = i;
}
}
const headers = jsonData[headerRow] || [];
// 添加所有非空列名
headers.forEach(header => {
if (header && typeof header === 'string') {
allColumns.add(header);
}
});
// 添加特殊字段
allColumns.add("文件名");
allColumns.add("文件路径");
// 注释掉工作表名，因为它不应该出现在可选字段中
// allColumns.add("工作表名");
// 保存文件数据
if (!fileData[file.name]) {
fileData[file.name] = {};
}
fileData[file.name][sheetName] = {
headers: headers,
data: jsonData.slice(headerRow + 1), // 跳过表头行
path: file.webkitRelativePath || file.name
};
}
});
resolve();
} catch (error) {
console.error(`处理文件 ${file.name} 时出错:`, error);
reject(error);
}
};
reader.onerror = reject;
reader.readAsArrayBuffer(file);
});
});
Promise.all(promises)
.then(() => {
refreshSourceTable();
alert(`扫描完成，共发现 ${allColumns.size} 个字段`);
})
.catch(error => {
console.error('扫描文件时出错:', error);
alert('扫描文件时出错，请检查文件格式');
});
}
// 刷新源字段表格
function refreshSourceTable() {
const tableBody = document.querySelector('#sourceTable tbody');
tableBody.innerHTML = '';
// 获取已映射的所有源字段
const mappedSources = new Set();
Object.values(columnMapping).forEach(mapping => {
mapping.sources.forEach(source => mappedSources.add(source));
});
// 获取未映射的字段并排序
const unmappedSources = Array.from(allColumns)
.filter(col => !mappedSources.has(col))
.sort();
// 填充表格
unmappedSources.forEach(col => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${col}</td>
`;
row.onclick = function() {
this.classList.toggle('selected');
};
tableBody.appendChild(row);
});
}
// 添加列映射
function addMapping() {
const selectedRows = document.querySelectorAll('#sourceTable tbody tr.selected');
if (selectedRows.length === 0) {
alert('请先选择要映射的字段');
return;
}
const selectedSources = Array.from(selectedRows).map(row =>
row.cells[0].textContent.trim() // 添加trim()去除空格
).filter(Boolean); // 过滤掉空值
if (selectedSources.length === 0) {
alert('没有有效的字段被选中');
return;
}
// 使用第一个选中的字段作为合并后字段名
const target = selectedSources[0];
// 添加到映射关系
columnMapping[target] = {
sources: selectedSources,
allowNull: false
};
// 刷新表格
refreshMappingTable();
refreshSourceTable();
// 清除选中状态
selectedRows.forEach(row => row.classList.remove('selected'));
}
// 删除列映射
function removeMapping() {
const selectedRows = document.querySelectorAll('#mappingTable tbody tr.selected');
if (selectedRows.length === 0) {
alert('请先选择要删除的映射');
return;
}
// 确认删除
if (!confirm(`确定要删除选中的${selectedRows.length}个映射吗？`)) {
return;
}
Array.from(selectedRows).forEach(row => {
const target = row.cells[0].textContent;
delete columnMapping[target];
row.classList.remove('selected');
});
refreshMappingTable();
refreshSourceTable();
}
// 刷新映射表格
function refreshMappingTable() {
const tableBody = document.querySelector('#mappingTable tbody');
tableBody.innerHTML = '';
Object.entries(columnMapping).forEach(([target, mapping]) => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${target}</td>
<td>${mapping.sources.join(', ')}</td>
<td>
<button onclick="toggleAllowNull('${target}')">允许空值: ${mapping.allowNull ? '是' : '否'}</button>
</td>
`;
row.onclick = function() {
this.classList.toggle('selected');
};
tableBody.appendChild(row);
});
}
// 切换允许空值状态
function toggleAllowNull(target) {
if (columnMapping[target]) {
columnMapping[target].allowNull = !columnMapping[target].allowNull;
refreshMappingTable();
}
}
// 合并文件
function mergeFiles() {
if (Object.keys(columnMapping).length === 0) {
alert('请先设置列映射');
return;
}
const mergedData = [];
excelFiles.forEach(file => {
const fileSheets = fileData[file.name];
if (!fileSheets) return;
const filename = file.name.replace(/\.[^/.]+$/, ""); // 去掉扩展名
// 遍历文件的所有工作表
Object.entries(fileSheets).forEach(([sheetName, sheetData]) => {
const { headers, data } = sheetData;
// 处理每行数据
data.forEach(row => {
const rowData = {};
rowData["文件名"] = filename;
// 只有当工作表名在列映射中时才添加到结果
if (columnMapping["工作表名"]) {
rowData["工作表名"] = sheetName;
}
// 处理映射
let shouldSkip = false;
Object.entries(columnMapping).forEach(([target, mapping]) => {
if (shouldSkip) return;
// 尝试从源列获取值
for (const source of mapping.sources) {
const colIndex = headers.indexOf(source);
if (colIndex !== -1 && row[colIndex] !== undefined) {
rowData[target] = row[colIndex];
break;
}
}
// 检查是否不允许为空且确实为空
if (!mapping.allowNull && (rowData[target] === undefined || rowData[target] === '')) {
shouldSkip = true;
}
});
if (!shouldSkip) {
mergedData.push(rowData);
}
});
});
});
// 创建合并后的工作表
const ws = XLSX.utils.json_to_sheet(mergedData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "合并数据");
// 触发下载
XLSX.writeFile(wb, "合并结果.xlsx");
alert('文件合并完成，已下载');
}
// 保存配置
function saveConfig() {
const config = {
columnMapping: columnMapping
};
const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'excel_merger_config.json';
a.click();
URL.revokeObjectURL(url);
}
// 加载配置
function loadConfig() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
try {
const config = JSON.parse(e.target.result);
if (config.columnMapping) {
columnMapping = config.columnMapping;
refreshMappingTable();
refreshSourceTable();
alert('配置加载成功');
}
} catch (error) {
console.error('加载配置时出错:', error);
alert('加载配置时出错，请检查文件格式');
}
};
reader.readAsText(file);
};
input.click();
}
</script>
</body>
</html>猜你喜欢
- 2025-06-15 Java 加密解密PowerPoint文档（java中加密解密）
- 2025-06-15 JavaScript重构技巧—数组，类名和条件
- 2025-06-15 课堂点名总尴尬?试试 DeepSeek，或能实现点名自由!(附教程)
- 2025-06-15 按钮重复点击:这“简单”问题，为何难住大半面试者与开发者?
- 2025-06-15 一文带你了解PyQuery解析器（python文本解析器）
- 2025-06-15 ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
- 2025-06-15 jq+ajax+bootstrap改了一个动态分页的表格
- 2025-06-15 使用OC链式调用方式简化SpriteKit的动画调用
- 2025-06-15 键盘任意键控制 swiper滑屏 附js代码
- 2025-06-15 son-c库:打造高性能Web应用的完美解决方案
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)