Outils pour capturer et convertir le Web

Capturer une div avec JavaScript Screenshot API

API JavaScript

Une exigence courante consiste à capturer uniquement le contenu d'un seul élément HTML dans une page HTML. Par exemple, un élément div, span ou canvas.

Cependant, avant de pouvoir capturer un seul élément HTML à l'aide du code côté client. Telles qu'une capture d'écran image, PDF ou DOCX. Tu devras inscrivez-vous gratuitement puis téléchargez notre librairie JavaScript gratuite.

Une fois cela fait, il est facile de capturer un élément HTML. Vous avez juste besoin de passer le Sélecteur CSS de l'élément que vous souhaitez capturer au l'objectif paramètre.

Afin de construire votre sélecteur CSS, vous devrez trouver l'élément HTML que vous souhaitez capturer. Pour ce faire, regardez la source de la page Web cible. Un exemple est présenté ci-dessous.

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

Ainsi, par exemple, pour ne capturer que la div ci-dessus avec l'id de features, vous pouvez télécharger le Bibliothèque JavaScript GrabzIt puis utilisez le code JavaScript ci-dessous.

De plus, ce JavaScript redimensionne automatiquement la capture d’image obtenue aux mêmes dimensions que l’élément HTML ciblé en définissant bheight, height et width paramètres à -1. Lorsque la page est chargée, une image d’écran sera créée au même endroit que le script étiquette. Cela contiendra tout le contenu de la features div et rien d'autre.

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

Bien sûr, vous pouvez également capturer des éléments HTML lors de la conversion de HTML en image, PDF ou DOCX. Il suffit de remplacer la méthode ConvertURL avec ConvertHTML au dessus.

Capture de contenu dynamique

Souvent, vous souhaitez capturer le contenu de la page après que l'utilisateur a intavec une certaine manière, par exemple après avoir rempli un formulaire. GrabzIt vous permet de le faire en fournissant le ConvertPage méthode. Cela envoie le code HTML actuel de la page Web avec l'URL de la page Web à GrabzIt. Il est ensuite recréé dans un navigateur et converti into un document image, DOCX ou PDF.

Cependant, afin de résolvez toutes les ressources telles que les CSS ou les images référencées via des URL. Cette méthode doit être appelée sur une page Web accessible à partir du 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>

L'exemple crée une copie de la source d'une page Web, la met à jour avec les valeurs du formulaire et la transmet à GrabzIt pour la conversion. Comme nous voulons seulement capturer la div divSection, comme indiqué ci-dessus, nous passons cela comme cible. Cependant, vous ne pouvez pas spécifier les paramètres JSON et capturer la page Web entière telle qu'elle a été mise à jour par l'utilisateur.

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

La façon dont un PDF est rogné lors du ciblage d'un élément HTML peut être contrôlé en utilisant ces techniques.

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

En fonction de la nature du site Web que vous capturez, vous pouvez également utiliser cette approche pour capturer du contenu qui est: derrière un login. Utilisez simplement l'approche ci-dessus, avec ou sans les paramètres cibles souhaités. Ensuite, tant que les ressources de la page ne sont en aucun cas limitées, vous devriez pouvoir capturer le contenu de la page Web tel que vu par l'utilisateur.