通过 SPA Web 应用程序的屏幕截图生成报告 - 设计选择和选项

Question

要求：

对于我的 SPA 网站上的多个屏幕和操作（身份验证后），我需要截屏。最终目的是将图像导出到 Powerpoint 演示文稿。

屏幕截图将用于多种场景，例如：

1. 单击按钮可缩放屏幕上的另一个元素（不刷新页面）

2. 在屏幕上选择选项然后截屏

探索的选项：

1. 使用 Chrome Puppeteer 或 Selenium 或 Cypress 等工具，在后端以无头方式呈现网站并截取屏幕截图。

问题：

1. 有没有一种方法可以在 JavaScript 的前端实现？
2. 浏览器能否启动另一个无头浏览器？
3. 有更好的设计方案吗？

Answer 1

您可以使用 Javascript 库来实现它（例如html2canvas） 缺点是跨浏览器支持（不能保证它在所有浏览器上看起来都一样） 所以只有在渲染简单的 HTML/CSS 元素时才使用它

运行 Puppeteer 的小型服务器是 IMO 的最佳选择