Создание отчетов с помощью снимков экрана из веб-приложения SPA - варианты дизайна и параметры
Требование:
Для нескольких экранов и действий на моем веб-сайте SPA (за аутентификацией) мне нужно делать снимки экрана. Конечная цель - экспортировать изображения в презентацию Powerpoint.
Скриншоты нужно делать для нескольких сценариев, например:
При нажатии кнопки, которая увеличивает масштаб другого элемента на экране (без обновления страницы)
Выбор параметров на экранах и затем создание снимка экрана
Варианты изучены:
- Используйте такой инструмент, как Chrome Puppeteer, Selenium или Cypress, и визуализируйте веб-сайт без заголовка в серверной части и делайте снимки экрана.
Вопрос:
- Есть ли способ достичь этого во внешнем интерфейсе на JavaScript?
- Может ли браузер запустить другой браузер без головы?
- Есть варианты дизайна получше?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете добиться этого с помощью библиотеки Javascript (например, html2canvas) Недостаток - кроссбраузерная поддержка (нет гарантии, что он будет выглядеть одинаково во всех браузерах). Поэтому используйте его только в том случае, если вы визуализируете простые элементы HTML / CSS.
Небольшой сервер под управлением Puppeteer - лучший вариант IMO
Я не уверен, что понимаю это требование, я полагаю, вы также можете использовать эту библиотеку для скрытых элементов.
Спасибо. Но, как упоминалось в моем разделе «Требования», отчеты должны создаваться в интерактивном режиме. Так же, как пользователю нужен отчет о конкретном состоянии экрана, который материализуется после набора действий и правил JS. Не приведет ли это в замешательство пользователя? Как экран, автоматическое нажатие кнопок и т. д.