Tools zum Erfassen und Konvertieren des Webs

Capture ein Div mit JavaScript Screenshot API

JavaScript-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 herunter 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 das HTML-Element finden, das Sie erfassen möchten. Schauen Sie sich dazu die Quelle der Zielwebseite an. 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@/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>

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 zu teilen.

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" data-gt-translate-attributes='[{"attribute":"value","format":"json"}]' 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@/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@/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>

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.