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.

Tuttavia, prima di poter acquisire un singolo elemento HTML utilizzando il codice lato client. Come un'immagine, uno screenshot PDF o DOCX. Avrai bisogno di iscriverti gratuitamente e quindi scaricare il nostro libreria JavaScript gratuita.

Fatto ciò, è facile catturare un elemento HTML. Hai solo bisogno di passare il Selettore CSS dell'elemento che si desidera acquisire su bersaglio parametro.

Per costruire il tuo selettore CSS dovrai trovare l'elemento HTML che vuoi catturare. Per fare questo, guarda l'origine della pagina web di destinazione. Di seguito viene mostrato un esempio.

<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, puoi scaricare il file Libreria JavaScript GrabzIt e quindi utilizzare il codice JavaScript di seguito.

Questo JavaScript inoltre ridimensiona automaticamente lo screenshot dell'immagine risultante alle stesse dimensioni dell'elemento HTML di destinazione impostando l'opzione bheight, height ed width parametri a -1. Quando la pagina viene caricata, verrà creato uno screenshot di immagine nella stessa posizione di script etichetta. Questo conterrà tutti i contenuti di 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 metodo. Questo invia l'HTML corrente della pagina Web insieme all'URL della pagina Web a GrabzIt. Viene quindi ricreato in un browser e convertito into un documento immagine, DOCX o PDF.

Tuttavia, al fine di risolvere eventuali risorse come CSS o immagini a cui viene fatto riferimento tramite URL. Questo metodo deve essere chiamato su una pagina Web accessibile su 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'esempio crea una copia dell'origine di una pagina Web che lo aggiorna con qualsiasi valore di modulo e lo passa a GrabzIt per la conversione. Come vogliamo solo catturare il 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. Basta usare l'approccio sopra, con o senza i parametri target come desiderato. Quindi, fintanto che le risorse della pagina non sono limitate in ogni caso, dovresti essere in grado di acquisire il contenuto della pagina web come visto dall'utente.