核心逻辑是遍历的和，用作键、作值生成对象；需检查表头存在性、对齐单元格数量、处理合并单元格、类型转换及ie11兼容性，并通过blob导出格式化json文件。
点击按钮时触发表格转JSON的核心逻辑
关键不是按钮本身，而是它绑定的 JavaScript 逻辑——必须遍历 <table> 的 <code><thead> 和 <code><tbody>，用表头单元格（<code><th>）作为键名，每行数据（<code><td>）作为值生成对象。直接读取 <code>innerHTML 或只遍历 <tr> 不区分表头/数据行，会导致字段错位或丢失。
<p>常见错误现象：<code>Uncaught TypeError: Cannot read property 'innerText' of null，通常是因为没检查 <thead> 是否存在，或某行 <code><td> 数量与表头不匹配。
<ul>
<li>优先用 <code>document.querySelector('table thead th') 提取表头，避免依赖固定索引
<tr>，用 <code>Array.from(tr.querySelectorAll('td')).map(td => td.innerText.trim()) 获取值，跳过空单元格但保留顺序
<colspan></colspan> 或 <rowspan></rowspan>，需额外处理合并单元格逻辑，否则 JSON 字段会错位处理特殊字符和数据类型（日期、数字、布尔）
原生 innerText 会把 12/05/2024、true、123.45 全当字符串，但 JSON 消费方常期望对应类型。不能靠正则盲目转换，得结合列语义判断。
使用场景：导出后要被 fetch 发送到后端 API，或被 JSON.parse() 后直接用于图表渲染。
- 对表头含
"date"、"time"的列，尝试用Date.parse()验证后再存为 ISO 字符串（如new Date(val).toISOString()） - 对明显是数字的列（如全由数字、小数点、负号组成），用
parseFloat(val)并检查!isNaN()，避免把"1e5"错转成字符串 - 对值为
"true"/"false"（忽略大小写）且表头含"is_"或"flag"的列，转为布尔值
兼容 IE11 的 DOM 遍历写法
现代写法如 tr.querySelectorAll('td').forEach 在 IE11 会报错，因为 NodeList 不支持 forEach。必须用传统 for 循环或 Array.prototype.slice.call() 转换。
性能影响：IE11 下 querySelectorAll 本身较慢，若表格超 100 行，建议加节流或提示“处理中…”状态。
- 替换
Array.from(nodes)为[].slice.call(nodes) - 避免链式调用
document.querySelector('table').querySelectorAll('thead th')，先缓存tableEl = document.querySelector('table') - IE11 不支持
textContent对某些元素（如<input>内嵌在<td> 中），此时需 fallback 到 <code>innerText或手动取value按钮点击后导出 JSON 文件而非仅 console.log
用户要的是可下载的文件，不是控制台输出。核心是构造 Blob +
URL.createObjectURL()+ 动态<a></a>触发下载。容易踩的坑：
download属性在跨域 iframe 或某些移动端浏览器中失效；JSON 字符串未格式化导致文件难阅读。- 用
JSON.stringify(jsonData, null, 2)增加缩进，提升可读性（注意体积增大） - 创建 Blob 时指定
{type: 'application/json;charset=utf-8'}，避免中文乱码 - 动态
<a></a>元素需 append 到document.body才能在 Firefox 中生效，且调用click()后立即remove() - 若表格含大量数据（>10MB），IE11 可能因 Blob URL 长度限制失败，此时应提示“请分页导出”
<th> 文本都是 “ID”，生成的 JSON 会覆盖字段。手动去重或添加序号前缀（如 <code>ID_1、ID_2）比强行报错更实用。 - 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
