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

Question

要求：

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

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

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

2. 选择屏幕上的选项，然后截取屏幕截图

探索的选项：

1. 使用 Chrome Puppeteer 或 Selenium 或 Cypress 之类的工具，在后端以无头方式渲染网站并截取屏幕截图。

问题：

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

标签： javascriptreportingpuppeteerheadless-browser

Answer 1

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

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