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

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

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

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

In order to construct your CSS selector you will need to find the HTML element that you want to capture. To do this look at the source of the target webpage. An example of which is shown below.

<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.4.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.4.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.4.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.4.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.4.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.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "docx"}).Create();
</script>

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