本文提供一段开箱即用的 javascript 脚本，可自动收集页面中所有具有相同结构的 html 表格，合并其内容（含表头），并导出为标准 csv 文件，兼容 excel、google sheets 等主流表格软件。
本文提供一段开箱即用的 javascript 脚本，可自动收集页面中所有具有相同结构的 html 表格，合并其内容（含表头），并导出为标准 csv 文件，兼容 excel、google sheets 等主流表格软件。
在企业内网（如 Tridion 环境）中，常需通过纯前端方式将多个 HTML 表格导出为统一报表。原方案仅支持按 ID 导出单个表格，而实际业务中往往存在多个部门/模块的平行表格（如 Dept1、Dept2、Dept3），亟需合并导出。直接生成 .xls 文件依赖浏览器兼容性（如 IE 的 msSaveOrOpenBlob），且易因 HTML 标签嵌套、特殊字符导致 Excel 解析异常。更可靠、轻量、跨平台的方案是导出为 CSV（Comma-Separated Values） ——它本质是纯文本格式，Excel 双击即可打开，支持百万行数据，且无样式干扰，兼容性极佳。
以下脚本可一键导出页面中全部 ? 为什么推荐 CSV 而非 XLS？ 只需一次点击，所有部门表格即刻合并为结构清晰、开箱即用的 CSV 报表——简洁、健壮、面向生产环境。<table> 元素（自动跳过无关表格，如导航栏），智能合并：首张表的 <code><thead> 作为最终 CSV 的表头，其余表格仅提取 <code><tbody> 中的行数据，确保结构统一、语义清晰。<h3>✅ 完整可用代码（复制即用）</h3>
<pre class="brush:php;toolbar:false;"><button type="button" onclick="exportAllTablesToCSV()">下载所有表格为 CSV</button>
<script>
function exportAllTablesToCSV() {
// 1. 收集所有 table 元素（排除可能的非数据表格，如布局用 table）
const tables = document.querySelectorAll('table[summary="Contacts"]');
if (tables.length === 0) {
alert('未找到符合条件的表格（summary="Contacts"）');
return;
}
let csvLines = [];
let headerWritten = false;
// 2. 遍历每个表格
tables.forEach((table, tableIndex) => {
const rows = table.querySelectorAll('tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td, th');
if (cells.length === 0) return;
// 提取每单元格纯文本（避免HTML标签、换行、多余空格影响CSV）
const cellValues = Array.from(cells).map(cell => {
// 移除HTML标签，保留换行符（CSV中换行需加引号）
let text = cell.textContent || cell.innerText || '';
// 用双引号包裹含逗号、换行或引号的内容（标准CSV转义）
if (/[,\"\n\r]/.test(text)) {
text = `"${text.replace(/"/g, '""')}"`;
}
return text;
});
// 仅对第一张表取一次表头（thead中的th），后续表格跳过表头
if (tableIndex === 0 && row.querySelector('th')) {
if (!headerWritten) {
csvLines.push(cellValues.join(','));
headerWritten = true;
}
} else if (row.querySelector('td')) {
// 仅导出数据行（含td的tr），忽略空行或纯th行
csvLines.push(cellValues.join(','));
}
});
});
if (csvLines.length === 0) {
alert('未提取到有效数据行，请检查表格结构');
return;
}
// 3. 生成并触发下载
const csvContent = '\uFEFF' + csvLines.join('\n'); // \uFEFF 为UTF-8 BOM，确保中文不乱码
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'AllDepartments.csv';
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url); // 清理内存
}
</script></pre>
<h3>? 使用说明与注意事项</h3>
<ul>
<li>
<strong>精准匹配表格</strong>：脚本通过 <code>document.querySelectorAll('table[summary="Contacts"]') 定位所有目标表格（与你的 HTML 中 summary="Contacts" 属性一致），避免误导导航栏等无关表格。如需适配其他标识，可改为 table.class-name 或 table[id^="Dept"]（匹配 Dept1/Dept2 等）。
<thead> 作为 CSV 表头，其余表格只导出 <code><tbody> 数据行，杜绝重复表头污染数据。<li>
<strong>安全转义</strong>：自动检测单元格内容是否含逗号（<code>,）、双引号（"）或换行符，并按 RFC 4180 标准用双引号包裹，内部双引号转义为 ""，确保 Excel 正确解析。\uFEFF）前缀，防止 Windows Excel 打开中文 CSV 时出现乱码。<button></button> 和 <script></script> 整块代码粘贴至 Tridion 的「Code Block」组件中即可生效，无需额外配置；按钮样式可通过 CSS 覆盖优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
