用 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; 的 <div>，不然长宽失控会撑爆弹窗 <h3>为什么 <code>JSON.stringify 预览不如表格直观，但有时更安全

  纯 JSON 文本预览适合字段嵌套深、含数组或布尔值的数据，表格反而会把 [1,2,3] 显示成 1,2,3 这种歧义格式。但 JSON.stringify 默认不换行、不缩进，人眼难读。

  • 用 JSON.stringify(sample, null, 2) 加缩进，但注意：如果某字段值是 Date 对象或 function，会变成 null 或直接丢弃——得提前用 toJSON() 或自定义 replacer 处理
  • 输出到 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 里比塞进 &lt;code&gt;&lt;div&gt; 更稳妥，能保留换行和空格，且默认防 XSS（只要没手动设 &lt;code&gt;innerHTML&lt;/code&gt;） &lt;li&gt;别直接对原始大数据调 &lt;code&gt;JSON.stringify&lt;/code&gt;，哪怕只取前 10 行，也要先 &lt;code&gt;JSON.parse(JSON.stringify(...))&lt;/code&gt; 深拷贝一次，否则引用类型字段改了会影响原数据&lt;/li&gt; &lt;h3&gt; &lt;code&gt;window.open&lt;/code&gt; 弹新窗口预览的兼容性坑&lt;/h3&gt; &lt;p&gt;Chrome 和 Edge 现在默认拦截无用户手势触发的 &lt;code&gt;window.open&lt;/code&gt;，比如放在异步回调里（如 &lt;code&gt;fetch.then&lt;/code&gt;），即使只是预览也会被当成广告弹窗干掉。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill10560&quot; title=&quot;生成HTML格式PPT&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179324117396599.jpg&quot; alt=&quot;生成HTML格式PPT&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill10560&quot; title=&quot;生成HTML格式PPT&quot;&gt;生成HTML格式PPT&lt;/a&gt; &lt;p&gt;从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill10560&quot; title=&quot;生成HTML格式PPT&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;必须绑定在明确的点击事件里，比如导出按钮的 &lt;code&gt;onclick&lt;/code&gt;，且不能加 &lt;code&gt;async&lt;/code&gt; 或丢到 &lt;code&gt;setTimeout&lt;/code&gt; 里延后&lt;/li&gt; &lt;li&gt;新窗口地址用 &lt;code&gt;about:blank&lt;/code&gt; 开头，再用 &lt;code&gt;document.write&lt;/code&gt; 写入 HTML，别用 &lt;code&gt;location.href&lt;/code&gt; 跳转——后者会丢失当前页上下文，也难控制样式&lt;/li&gt; &lt;li&gt;写入内容里别漏 &lt;code&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;/code&gt;，否则中文变方块；也别省 &lt;code&gt;&lt;style&gt;&lt;/style&gt;&lt;/code&gt; 块，外部 CSS 在新窗口里根本不会加载&lt;/li&gt; &lt;/ul&gt; &lt;h3&gt;用 &lt;code&gt;data:text/html&lt;/code&gt; URL 直接预览最轻量，但有长度限制&lt;/h3&gt; &lt;p&gt;这是真正零请求、不新开窗口、不污染 DOM 的方案，适合小样本（&lt;/p&gt; &lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;ul&gt; &lt;li&gt;编码前先用 &lt;code&gt;encodeURIComponent&lt;/code&gt; 处理 HTML 字符串，再拼成 &lt;code&gt;data:text/html;charset=utf-8,...&lt;/code&gt;，别用 &lt;code&gt;btoa&lt;/code&gt; ——它不支持 Unicode，中文直接报错&lt;/li&gt; &lt;li&gt;URL 总长超过约 2MB（各浏览器不同），Firefox 会静默失败，Chrome 报 &lt;code&gt;net::ERR_INVALID_URL&lt;/code&gt;，得 fallback 到内联弹窗&lt;/li&gt; &lt;li&gt;生成的 URL 可以直接赋给 &lt;code&gt;&lt;a download=&quot;preview.html&quot; href=&quot;...&quot;&gt;&lt;/a&gt;&lt;/code&gt;，点一下就下载，顺手解决“想存下来再看”的需求&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;最麻烦的其实是字段类型推断——数值带逗号分隔符、时间戳混着 ISO 字符串、布尔值写成字符串 &quot;true&quot;，这些都会让前 10 行看起来没问题，导出全量时却格式错乱。得在预览前加一层简易类型探测，而不是全信第一行。&lt;/p&gt; &lt;/div&gt;&lt;/code&gt;</pre>