Общее требование состоит в том, как захватить только содержимое одного 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 ниже.
features
Этот JavaScript дополнительно автоматически изменяет размер получаемого снимка экрана до тех же размеров, что и целевой HTML-элемент, устанавливая bheight, height и width параметры в -1. Когда страница загружена, снимок экрана будет создан в том же месте, что и script тег. Это будет содержать все содержимое features Div и ничего больше.
bheight
height
width
script
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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.8/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.8/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 выше.
ConvertURL
ConvertHTML
Часто вы хотите захватить содержимое страницы после того, как пользователь intкаким-то образом стерты с ним, например, после заполнения формы. GrabzIt позволяет вам сделать это, предоставляя ConvertPage метод. Это отправляет текущий HTML-код веб-страницы вместе с URL-адресом веб-страницы в GrabzIt. Затем он воссоздается в браузере и преобразуется into изображение, документ DOCX или PDF.
ConvertPage
Однако для того, чтобы разрешить любые ресурсы, такие как 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 и захватить всю веб-страницу, так как она была обновлена пользователем.
divSection
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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.8/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.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "docx"}).Create(); </script>
В зависимости от характера веб-сайта, который вы захватываете, вы также можете использовать этот подход для захвата контента, который за логином, Просто используйте вышеуказанный подход, с желаемыми параметрами или без них. Тогда до тех пор, пока ресурсы страницы не ограничены в любом случае, вы должны иметь возможность захватывать содержимое веб-страницы с точки зрения пользователя.