Strumenti per acquisire e convertire il Web

Cattura un div con API Screenshot JavaScript

API JavaScript

Un requisito comune è come acquisire solo il contenuto di un singolo elemento HTML in una pagina HTML. Ad esempio un elemento div, span o canvas.

However, before you can capture a single HTML element using client side code. Such as an image, PDF or DOCX screenshot. To use the JavaScript Screenshot API. You will need to iscriverti gratuitamente e quindi scaricare il nostro libreria JavaScript gratuita.

Once you do this, capturing an HTML element is easy. You just need to pass the Selettore CSS dell'elemento che si desidera acquisire su bersaglio parametro.

To construct your CSS selector you will need to find the HTML element that you want to capture. To do this look at the HTML source of the webpage you are trying to capture the element from. An example of this is below.

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

Ad esempio, per fare uno screenshot solo del div sopra con l'id di features use the JavaScript code below.

This JavaScript additionally autosizes the resultant image screenshot to the same dimensions as the targeted HTML element. By setting the bheight, height ed width parametri to -1. When the page loads, it will create an image screenshot in the same location as the script tag. This will contain the contents of the features div e nient'altro.

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

Ovviamente, puoi anche catturare elementi HTML quando converti HTML in un'immagine, PDF o DOCX. Sostituisci semplicemente il metodo ConvertURL con ConvertHTML sopra.

Acquisizione di contenuti dinamici

Spesso si desidera acquisire il contenuto della pagina dopo che l'utente ha interetto in qualche modo con esso, ad esempio dopo aver compilato un modulo. GrabzIt ti consente di farlo fornendo il ConvertPage method. This sends the current HTML of the web page along with the URL of the web page to GrabzIt. The system then loads the content in a browser and converts it into an image, DOCX, or PDF document.

To load resources such as CSS or images referenced by absolute URL. You need an internet connection for this method to work properly.

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

The example makes a copy of a webpage, updates it with form values, and sends it to GrabzIt for conversion. As we only want to capture the div divSection, come mostrato sopra, lo stiamo passando come obiettivo. Tuttavia, non è possibile specificare i parametri JSON e acquisire l'intera pagina Web poiché è stata aggiornata dall'utente.

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

Come può essere ritagliato un PDF durante il targeting di un elemento HTML controllato usando queste tecniche.

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

A seconda della natura del sito Web che stai acquisendo, puoi anche utilizzare questo approccio per acquisire il contenuto che è dietro un login. Simply use the above approach, with or without the target parameters as desired. Then if you have not restricted the page resources, you can capture the webpage content as seen by the user.