【含代码】Excel文件合并工具，我的AI编程经历
zhezhongyun 2025-06-12 19:04 3 浏览
本人业余爱好编写小工具，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>相关推荐
- JavaScript做个贪吃蛇小游戏(过关-加速)，无需网络直接玩。
-
JavaScript做个贪吃蛇小游戏（过关-则加速）在浏览器打开文件，无需网络直接玩。<!DOCTYPEhtml><htmllang="en"><...
- 大模型部署加速方法简单总结（大模型 ai）
-
以下对大模型部署、压缩、加速的方法做一个简单总结，为后续需要备查。llama.cppGithub:https://github.com/ggerganov/llama.cppLLaMA.cpp项...
- 安徽医大第一医院应用VitaFlow Liberty(R)Flex为患者焕然一“心”
-
近日，在安徽医科大学第一附属医院心血管内科负责人暨北京安贞医院安徽医院业务副院长喻荣辉教授的鼎力支持和卓越带领下，凭借着先进的VitaFlowLiberty(R)Flex经导管主动脉瓣可回收可...
- 300 多行代码搞定微信 8.0 的「炸」「裂」特效!
-
微信8.0更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和...
- 让div填充屏幕剩余高度的方法（div填充20px）
-
技术背景在前端开发中，经常会遇到需要让某个div元素填充屏幕剩余高度的需求，比如创建具有固定头部和底部，中间内容区域自适应填充剩余空间的布局。随着CSS技术的发展，有多种方法可以实现这一需求。实现步骤...
- css之div内容居中（css中div怎么居中）
-
div中的内容居中显示，包括水平和垂直2个方向。<html><head><styletype="text/css">...
- 使用uniapp开发小程序遇到的一些问题及解决方法
-
1、swiper组件自定义知识点swiper组件的指示点默认是圆圈，想要自己设置指示点，需要获得当前索引，然后赋给当前索引不同的样式，然后在做个动画就可以了。*关键点用change方法，然后通过e.d...
- 微信小程序主页面排版（怎样设置小程序的排版）
-
开发小程序的话首先要了解里面的每个文件的作用小程序没有DOM对象，一切基于组件化小程序的四个重要的文件*.js*.wxml--->view结构---->html*.wxss--...
- Vue动态组件的实践与原理探究（vue动态组件component原理）
-
我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。ps.本文项目使用VueCLI...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -＞ tabs
-
目录1->创建Tabs2->设置Tabs方向3->设置样式4->显示页签索引5->场景示例编辑1->创建Tabs在pages/index目录...
- CSS:前端必会的flex布局，我把布局代码全部展示出来了
-
进入我的主页，查看更多CSS的分享！首先呢，先去看文档，了解flex是什么，这里不做赘述。当然，可以看下面的代码示例，辅助你理解。一、row将子元素在水平方向进行布局：1.垂直方向靠顶部，水平方向靠...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -＞ swiper
-
目录1->创建Swiper组件2->添加属性3->设置样式4->绑定事件5->场景示例编辑1->创建Swiper组件在pages/index...
- CSS:Flex布局，网页排版神器!（css3 flex布局）
-
还在为网页排版抓狂？别担心，CSS的flex布局来了，让你轻松玩转各种页面布局，实现网页设计自由！什么是Flex布局？Flex布局，也称为弹性布局，是CSS中的一种强大布局方式，它能够让你...
- 移动WEB开发之flex布局，附携程网首页案例制作
-
一、flex布局体验传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.1flex弹性布局：操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部...
- 2024最新升级–前端内功修炼 5大主流布局系统进阶(mk分享)
-
2024最新升级–前端内功修炼5大主流布局系统进阶(mk分享)获课》789it.top/14658/前端布局是网页设计中至关重要的一环，它决定了网页的结构和元素的排列方式。随着前端技术的不断发展，现...
- 一周热门
- 最近发表
-
- JavaScript做个贪吃蛇小游戏(过关-加速)，无需网络直接玩。
- 大模型部署加速方法简单总结（大模型 ai）
- 安徽医大第一医院应用VitaFlow Liberty(R)Flex为患者焕然一“心”
- 300 多行代码搞定微信 8.0 的「炸」「裂」特效!
- 让div填充屏幕剩余高度的方法（div填充20px）
- css之div内容居中（css中div怎么居中）
- 使用uniapp开发小程序遇到的一些问题及解决方法
- 微信小程序主页面排版（怎样设置小程序的排版）
- Vue动态组件的实践与原理探究（vue动态组件component原理）
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -＞ tabs
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)