Tools om het web vast te leggen en te converteren

Leg een div vast met JavaScript Screenshot API

JavaScript API

Een veelvoorkomende vereiste is hoe alleen de inhoud van een enkel HTML-element in een HTML-pagina kan worden vastgelegd. Bijvoorbeeld een div-, span- of canvas-element.

Voordat u echter een enkel HTML-element kunt vastleggen met behulp van client-side code. Zoals een afbeelding, PDF of DOCX-screenshot. Je zal moeten GRATIS! en download dan onze gratis JavaScript-bibliotheek.

Zodra dit is gebeurd, is het eenvoudig om een ​​HTML-element vast te leggen. Je moet gewoon het passeren CSS-selector van het element dat u wilt vastleggen aan de doel parameter.

Om uw CSS-selector samen te stellen, moet u het HTML-element vinden dat u wilt vastleggen. Kijk hiervoor naar de bron van de doelwebpagina. Hieronder ziet u een voorbeeld.

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

Dus bijvoorbeeld om alleen een screenshot te maken van de div hierboven met de id van features, kunt u de downloaden GrabzIt JavaScript-bibliotheek en gebruik vervolgens de onderstaande JavaScript-code.

Met dit JavaScript wordt bovendien de resulterende schermafbeelding van afbeeldingen automatisch aangepast aan dezelfde afmetingen als het getargete HTML-element door de bheight, height en width parameters tot -1. Wanneer de pagina wordt geladen, wordt een screenshot gemaakt op dezelfde locatie als de script label. Dit bevat alle inhoud van de features div en niets anders.

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

Natuurlijk kunt u ook HTML-elementen vastleggen bij het converteren van HTML naar een afbeelding, PDF of DOCX. Vervang gewoon de methode ConvertURL Met ConvertHTML bovenstaand.

Dynamische inhoud vastleggen

Vaak wilt u pagina-inhoud vastleggen nadat de gebruiker dit heeft gedaan inter op de een of andere manier mee te maken, bijvoorbeeld na het invullen van een formulier. Met GrabzIt kunt u dit doen door de ConvertPage methode. Dit stuurt de huidige HTML van de webpagina samen met de URL van de webpagina naar GrabzIt. Het wordt vervolgens opnieuw gemaakt in een browser en geconverteerd into een afbeelding, DOCX of PDF-document.

Echter om eventuele bronnen zoals CSS of afbeeldingen oplossen waarnaar wordt verwezen via URL's. Deze methode moet worden opgeroepen op een webpagina die toegankelijk is via 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>

Het voorbeeld maakt een kopie van de bron van een webpagina, werkt deze bij met eventuele formulierwaarden en geeft deze door aan GrabzIt om te worden geconverteerd. Omdat we alleen de div willen vangen divSection, zoals hierboven weergegeven, geven we dat als doel door. U kunt echter niet de JSON-parameters opgeven en de hele webpagina vastleggen, omdat deze door de gebruiker is bijgewerkt.

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

Hoe een PDF wordt bijgesneden bij het targeten van een HTML-element kan zijn gecontroleerd met behulp van deze technieken.

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

Afhankelijk van de aard van de website die u vastlegt, kunt u deze aanpak ook gebruiken om inhoud vast te leggen achter een login. Gebruik eenvoudig de bovenstaande aanpak, met of zonder de gewenste parameters zoals gewenst. Zolang de paginabronnen hoe dan ook niet worden beperkt, zou u de inhoud van de webpagina moeten kunnen vastleggen, zoals gezien door de gebruiker.