Narzędzia do przechwytywania i konwertowania Internetu

Capture a Div with JavaScript Screenshot API

JavaScript API

Częstym wymogiem jest sposób przechwytywania zawartości pojedynczego elementu HTML na stronie HTML. Np. Element div, span lub canvas.

Zanim jednak można przechwycić pojedynczy element HTML za pomocą kodu po stronie klienta. Takich jak obraz, plik PDF lub zrzut ekranu DOCX. Będziesz musiał zarejestruj się za darmo a następnie pobierz nasz darmowa biblioteka JavaScript.

Po wykonaniu tej czynności łatwo jest przechwycić element HTML. Musisz tylko zdać Selektor CSS elementu, który chcesz przechwycić do cel parametr.

Aby skonstruować selektor CSS, musisz znaleźć element HTML, który chcesz przechwycić. Aby to zrobić, spójrz na źródło docelowej strony internetowej. Przykład tego przedstawiono poniżej.

<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>

Na przykład zrzut ekranu tylko powyżej div z identyfikatorem features, możesz pobrać Biblioteka JavaScript GrabzIt a następnie użyj kodu JavaScript poniżej.

Ten JavaScript dodatkowo automatycznie dostosowuje wynikowy zrzut ekranu obrazu do tych samych wymiarów, co docelowy element HTML, ustawiając opcję bheight, height i width parametry na -1. Po załadowaniu strony zrzut ekranu obrazu zostanie utworzony w tym samym miejscu co script etykietka. Będzie to zawierało całą zawartość pliku features div i nic więcej.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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@/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>

Oczywiście można również przechwytywać elementy HTML podczas konwersji HTML na obraz, PDF lub DOCX. Po prostu zamień metodę ConvertURL w ConvertHTML powyżej.

Przechwytywanie zawartości dynamicznej

Często chcesz przechwytywać zawartość strony po tym, jak użytkownik to zrobił intz nim w jakiś sposób wpłynęło, na przykład po wypełnieniu formularza. GrabzIt umożliwia ci to, udostępniając ConvertPage metoda. To wysyła aktualny kod HTML strony wraz z adresem URL strony do GrabzIt. Następnie jest odtwarzany w przeglądarce i konwertowany into obraz, dokument DOCX lub PDF.

Jednak w celu rozwiązać wszelkie zasoby, takie jak CSS lub obrazy, do których odwołują się adresy URL. Tę metodę należy wywołać na stronie internetowej dostępnej w 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" data-gt-translate-attributes='[{"attribute":"value","format":"json"}]' value="Save"/>
    </form>
</div>

Przykład tworzy kopię źródła strony internetowej aktualizuje ją dowolnymi wartościami formularza i przekazuje do GrabzIt do konwersji. Ponieważ chcemy tylko uchwycić div divSection, jak pokazano powyżej, przekazujemy to jako cel. Nie można jednak określić parametrów JSON i przechwycić całej strony internetowej, ponieważ została zaktualizowana przez użytkownika.

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

Sposób przycinania pliku PDF podczas kierowania elementu HTML może być kontrolowane przy użyciu tych technik.

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

W zależności od charakteru witryny, którą przechwytujesz, możesz również zastosować to podejście do przechwytywania treści za loginem. Po prostu zastosuj powyższe podejście, z parametrami docelowymi lub bez, zależnie od potrzeb. Następnie, o ile zasoby strony nie są w żaden sposób ograniczone, powinieneś być w stanie przechwycić treść strony widzianej przez użytkownika.