puppeteer 截图空白或不完整，因未等待 dom 和 js 渲染完成；应使用 waituntil 选项并配合 waitforselector 等待关键元素，处理滚动、缩放、字体加载等问题。
用 Puppeteer 截图 HTML 页面时，为什么生成的图片是空白或不完整？
根本原因通常是页面没等 DOM 渲染完、JS 执行完就截了。Puppeteer 默认 page.screenshot() 不等待任何动态内容，只抓当前 DOM 快照。
- 确保用
page.goto(url, { waitUntil: 'networkidle0' })或更稳妥的waitUntil: 'domcontentloaded'+ 手动page.waitForSelector()等关键元素 - 如果页面依赖 React/Vue，得等框架挂载完成，比如等一个带
data-loaded="true"的根节点出现 - 截图前加
await page.evaluate(() => window.scrollTo(0, 0))，避免因滚动位置导致部分内容被裁掉
Node.js 里用 html2canvas 生成图片，为啥字体/样式全乱了？
html2canvas 是纯前端方案，在 Node.js 里跑不起来——它必须在浏览器环境执行。强行用 JSDOM 模拟会失败，因为不支持 canvas 渲染、字体加载、CSS transform 等核心能力。
- 别在服务端直接 require
html2canvas，它不是为 Node 设计的 - 真要服务端渲染，选 Puppeteer 或 Playwright；若必须用
html2canvas，只能走「前端触发 → 生成 blob → 上传 base64 到后端」这条路 - 常见报错如
TypeError: Cannot read property 'getContext' of null就是 canvas 元素没正确创建或未插入 DOM
Puppeteer 截图时如何控制分辨率和缩放，让文字清晰不糊？
默认截图是按设备像素比 1x 输出，高清屏上文字发虚。关键在 page.emulateViewport() 和 screenshot({ deviceScaleFactor: 2 }) 配合。
银色网新企业网站管理系统8.1
下载
网新企业网站管理系统是专业为个人和企业网站建设而开发的一款智能化程序。该程序基于ASP+ACCESS环境开发，拥有完善的网站前台和后台全智能化管理功能，完全由后台操作（如添加、修改网站基本信息、产品、企业新闻动态等）静态生成前台界面HTML格式网页文件，是个人和企业智能化网站建设首选！
- 先调用
page.setViewport({ width: 1200, height: 800, deviceScaleFactor: 2 })，再截图，比只传deviceScaleFactor更可靠 - 避免用
fullPage: true截长图：高度太大时易 OOM，且缩放后字体边缘可能锯齿；建议分段截图再拼接 - 导出 PNG 优于 JPEG，尤其含文字时；JPEG 的压缩会模糊小字号和细线
生成的图片怎么自动适配不同尺寸的 HTML 内容？
不能靠 CSS 的 width: 100% 或 transform: scale() 去“缩放整个页面再截图”，这会导致像素失真、文字发虚。真实做法是动态计算视口尺寸。
立即学习“前端免费学习笔记（深入）”；
- 用
page.$eval('body', el => el.scrollHeight)获取实际高度，再设page.setViewport({ height: Math.min(10000, scrollHeight + 100) }) - 宽度固定为 1200px（适配主流设计稿），高度按内容算，避免留白或截断
- 如果 HTML 含响应式组件（如图表），截图前用
page.addStyleTag({ content: '@media screen { * { width: auto !important; } }' })临时禁用媒体查询干扰
最麻烦的其实是字体加载和第三方资源（比如 CDN 上的图标字体、远程 CSS）。本地没缓存时，networkidle0 可能误判加载完成——得单独 waitForFunction 检查 document.fonts.check('12px "xxx"') 或监听 document.fonts.onloadingdone。
