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 weiterf├╝hrende 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.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>

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

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

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.