Tools zum Erfassen und Konvertieren des Webs

Capture ein Div mit JavaScript Screenshot APIJavaScript-API

Eine hÀufige Anforderung besteht darin, nur den Inhalt eines einzelnen HTML-Elements in einer HTML-Seite zu erfassen. ZB ein div-, span- oder canvas-Element.

Bevor Sie jedoch ein einzelnes HTML-Element mit clientseitigem Code erfassen können. Wie ein Bild-, PDF- oder DOCX-Screenshot. Du wirst brauchen Jetzt kostenlos anmelden und laden Sie dann unsere kostenlose JavaScript-Bibliothek.

Sobald dies erledigt ist, ist es einfach, ein HTML-Element zu erfassen. Sie mĂŒssen nur die CSS-Selektor des Elements, das Sie erfassen möchten, in das Ziel Parameters.

Um Ihren CSS-Selektor zu erstellen, mĂŒssen Sie die ID oder Klasse des HTML-Elements finden, das Sie erfassen möchten. Betrachten Sie dazu die Quelle der Zielwebseite. Ein Beispiel dafĂŒr ist unten gezeigt.

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

Also zum Beispiel nur den obigen div mit der ID von screenshot featureskönnen Sie die GrabzIt JavaScript Bibliothek Verwenden Sie dann den folgenden JavaScript-Code.

Dieses JavaScript vergrĂ¶ĂŸert den resultierenden Bild-Screenshot automatisch auf die gleichen Abmessungen wie das Ziel-HTML-Element, indem das festgelegt wird bheight, height und width Parameter zu -1. Wenn die Seite geladen wird, wird ein Screenshot an derselben Stelle wie der erstellt script Etikett. Dieser enthĂ€lt den gesamten Inhalt der features div und sonst nichts.

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

NatĂŒrlich können Sie auch HTML-Elemente erfassen, wenn Sie HTML in ein Bild, PDF oder DOCX konvertieren. Ersetzen Sie einfach die Methode ConvertURL mit ConvertHTML ĂŒber.

Dynamischen Inhalt erfassen

HĂ€ufig möchten Sie den Seiteninhalt erfassen, nachdem der Benutzer dies getan hat intin irgendeiner Weise damit umgegangen, zum Beispiel nach dem AusfĂŒllen eines Formulars. Mit GrabzIt können Sie dies tun, indem Sie das bereitstellen ConvertPage Methode. Dies sendet das aktuelle HTML der Webseite zusammen mit der URL der Webseite an GrabzIt. Es wird dann in einem Browser neu erstellt und konvertiert into ein Bild-, DOCX- oder PDF-Dokument.

Um jedoch Lösen Sie alle Ressourcen wie CSS oder Bilder, auf die ĂŒber URLs verwiesen wird. Diese Methode muss auf einer Webseite aufgerufen werden, auf die auf der zugegriffen werden kann 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>

Im Beispiel wird eine Kopie der Quelle einer Webseite erstellt, die mit allen Formularwerten aktualisiert und zur Konvertierung an GrabzIt ĂŒbergeben wird. Da wollen wir nur die div einfangen divSectionWie oben gezeigt, ĂŒbergeben wir das als Ziel. Sie konnten jedoch die JSON-Parameter nicht angeben und die gesamte Webseite erfassen, da sie vom Benutzer aktualisiert wurde.

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

Wie ein PDF beim Targeting eines HTML-Elements beschnitten wird, kann sein gesteuert mit diesen Techniken.

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

AbhĂ€ngig von der Art der Website, die Sie erfassen, können Sie diesen Ansatz auch zum Erfassen von Inhalten verwenden hinter einem Login. Verwenden Sie einfach den obigen Ansatz mit oder ohne die gewĂŒnschten Zielparameter. Solange die Seitenressourcen nicht eingeschrĂ€nkt sind, sollten Sie in der Lage sein, den Webseiteninhalt so zu erfassen, wie er vom Benutzer gesehen wird.