Захват Div с помощью JavaScript Скриншот API

Общее требование состоит в том, как захватить только содержимое одного HTML-элемента на HTML-странице. Например, элемент div, span или canvas.

Однако, прежде чем вы сможете захватить один элемент HTML, используя код на стороне клиента. Например, изображение, скриншот в формате PDF или DOCX. Вам нужно будет подписаться на бесплатный а затем скачать наш бесплатная библиотека JavaScript.

Как только это сделано, легко захватить элемент HTML. Вам просто нужно передать CSS селектор элемента, который вы хотите захватить в цель Параметр.

Чтобы создать селектор CSS, вам нужно найти идентификатор или класс HTML-элемента, который вы хотите захватить. Для этого посмотрите на источник целевой веб-страницы. Пример которого показан ниже.

<div id="features">
	<h4>Acme Camera</h4>
	<label>Price</label>$399<br />
	<label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

Так, например, для скриншота только div выше с идентификатором featuresВы можете скачать GrabzIt JavaScript библиотека и затем используйте код JavaScript ниже.

Конвертировать HTML элемент в изображение
Конвертировать HTML элемент в PDF
Конвертировать HTML элемент в DOCX

Этот JavaScript дополнительно автоматически изменяет размер получаемого снимка экрана до тех же размеров, что и целевой HTML-элемент, устанавливая bheight, height и width параметры в -1. Когда страница загружена, снимок экрана будет создан в том же месте, что и script тег. Это будет содержать все содержимое features Div и ничего больше.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "docx"}).Create();
</script>

Конечно, вы также можете захватывать элементы HTML при преобразовании HTML в изображение, PDF или DOCX. Просто замени метод ConvertURL с ConvertHTML выше.

Захват динамического контента

Часто вы хотите захватить содержимое страницы после того, как пользователь intкаким-то образом стерты с ним, например, после заполнения формы. GrabzIt позволяет вам сделать это, предоставляя ConvertPage метод. Это отправляет текущий HTML-код веб-страницы вместе с URL-адресом веб-страницы в GrabzIt. Затем он воссоздается в браузере и преобразуется into изображение, документ DOCX или PDF.

Однако для того, чтобы разрешить любые ресурсы, такие как CSS или изображения, на которые ссылаются через URL. Этот метод должен вызываться на веб-странице, доступной на intERNET.

<div id="divSection">
    <form id="myForm">
        <label>Name</label><input type="text" name="name" />
        <label>Age</label><input type="text" name="age" />
        <input type="button" value="Save"/>
    </form>
</div>

В этом примере создается копия источника веб-страницы, которая обновляет ее при помощи любых значений формы и передает ее в GrabzIt для преобразования. Как мы только хотим захватить div divSectionКак показано выше, мы передаем это как цель. Однако вы не можете указать параметры JSON и захватить всю веб-страницу, так как она была обновлена пользователем.

Преобразование динамического содержимого в изображение
Конвертировать динамический контент в PDF
Конвертировать динамический контент в DOCX

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

Каким образом обрезается PDF при нацеливании на элемент HTML контролируется с помощью этих методов.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "pdf"}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "docx"}).Create();
</script>

В зависимости от характера веб-сайта, который вы захватываете, вы также можете использовать этот подход для захвата контента, который за логином, Просто используйте вышеуказанный подход, с желаемыми параметрами или без них. Тогда до тех пор, пока ресурсы страницы не ограничены в любом случае, вы должны иметь возможность захватывать содержимое веб-страницы с точки зрения пользователя.