用 slice(0,10) 截取前10行生成表格预览，Object.keys(data[0]||{}) 提取表头，单元格内容转 String() 防 null/undefined 显示，外层 div 限高加滚动；JSON 预览用 JSON.stringify(sample,null,2) 加缩进并深拷贝，嵌套数据优先选 JSON；window.open 需用户点击触发，data:text/html 最轻量但有长度限制。
怎么用 innerHTML 快速生成预览表格但不卡死页面
直接拼接字符串塞进 innerHTML 最快，但数据量稍大（比如超 500 行）就会明显卡顿，浏览器主线程被占满，连滚动都卡。关键是别一次性渲染全部样本，只取前 10 行做结构校验用。
- 先用
Array.slice(0, 10)截取原始数组，不是用for循环到 10 就停——后者容易漏掉对象键名不一致的字段 - 表头用
Object.keys(data[0] || {})提取，但得加空值判断，否则data是空数组时会报Cannot read property 'keys' of undefined - 每行单元格内容统一过一遍
String()，避免null或undefined渲染成文字 “null”“undefined”，而应留空 - 表格外层包个带
max-height: 300px; overflow-y: auto;的，不然长宽失控会撑爆弹窗为什么
JSON.stringify预览不如表格直观，但有时更安全纯 JSON 文本预览适合字段嵌套深、含数组或布尔值的数据，表格反而会把
[1,2,3]显示成1,2,3这种歧义格式。但JSON.stringify默认不换行、不缩进，人眼难读。- 用
JSON.stringify(sample, null, 2)加缩进，但注意：如果某字段值是Date对象或function，会变成null或直接丢弃——得提前用toJSON()或自定义 replacer 处理 - 输出到
<code></code> 里比塞进 <code><div> 更稳妥，能保留换行和空格，且默认防 XSS（只要没手动设 <code>innerHTML</code>） <li>别直接对原始大数据调 <code>JSON.stringify</code>，哪怕只取前 10 行，也要先 <code>JSON.parse(JSON.stringify(...))</code> 深拷贝一次，否则引用类型字段改了会影响原数据</li> <h3> <code>window.open</code> 弹新窗口预览的兼容性坑</h3> <p>Chrome 和 Edge 现在默认拦截无用户手势触发的 <code>window.open</code>，比如放在异步回调里（如 <code>fetch.then</code>），即使只是预览也会被当成广告弹窗干掉。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill" class="overflowclass">htmlppt.skill</a> <p class="overflowclass">把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>必须绑定在明确的点击事件里，比如导出按钮的 <code>onclick</code>，且不能加 <code>async</code> 或丢到 <code>setTimeout</code> 里延后</li> <li>新窗口地址用 <code>about:blank</code> 开头，再用 <code>document.write</code> 写入 HTML，别用 <code>location.href</code> 跳转——后者会丢失当前页上下文，也难控制样式</li> <li>写入内容里别漏 <code><meta charset="utf-8"></code>，否则中文变方块；也别省 <code><style></style></code> 块，外部 CSS 在新窗口里根本不会加载</li> </ul> <h3>用 <code>data:text/html</code> URL 直接预览最轻量，但有长度限制</h3> <p>这是真正零请求、不新开窗口、不污染 DOM 的方案，适合小样本（ </p> <ul> <li>编码前先用 <code>encodeURIComponent</code> 处理 HTML 字符串，再拼成 <code>data:text/html;charset=utf-8,...</code>，别用 <code>btoa</code> ——它不支持 Unicode，中文直接报错</li> <li>URL 总长超过约 2MB（各浏览器不同），Firefox 会静默失败，Chrome 报 <code>net::ERR_INVALID_URL</code>，得 fallback 到内联弹窗</li> <li>生成的 URL 可以直接赋给 <code><a download="preview.html" href="..."></a></code>，点一下就下载，顺手解决“想存下来再看”的需求</li> </ul> <p>最麻烦的其实是字段类型推断——数值带逗号分隔符、时间戳混着 ISO 字符串、布尔值写成字符串 "true"，这些都会让前 10 行看起来没问题，导出全量时却格式错乱。得在预览前加一层简易类型探测，而不是全信第一行。</p> </div></code>
- 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
