Herramientas para capturar y convertir la web

Capture un Div con JavaScript Screenshot API

API de JavaScript

Un requisito común es cómo capturar solo el contenido de un único elemento HTML en una página HTML. Por ejemplo, un elemento div, span o canvas.

Sin embargo, antes de poder capturar un solo elemento HTML utilizando el código del lado del cliente. Como una imagen, PDF o captura de pantalla DOCX. Necesitaras registrarse de forma gratuita y luego descarga nuestro biblioteca de JavaScript gratuita.

Una vez hecho esto, es fácil capturar un elemento HTML. Solo necesitas pasar el Selector de CSS del elemento que desea capturar al objetivo parámetro.

Para construir su selector de CSS, necesitará encontrar el elemento HTML que desea capturar. Para hacer esto, mire el origen de la página web de destino. A continuación, se muestra un ejemplo.

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

Entonces, por ejemplo, para capturar solo el div de arriba con la identificación de features, puedes descargar el Biblioteca de JavaScript GrabzIt y luego use el código JavaScript a continuación.

Este JavaScript adicionalmente automatiza la captura de pantalla de la imagen resultante a las mismas dimensiones que el elemento HTML objetivo configurando bheight, height y width parámetros a -1. Cuando se carga la página, se creará una captura de pantalla de imagen en la misma ubicación que script etiqueta. Esto contendrá todo el contenido de la features div y nada más.

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

Por supuesto, también puede capturar elementos HTML al convertir HTML en una imagen, PDF o DOCX. Simplemente reemplace el método ConvertURL ConvertHTML anterior.

Capturando contenido dinámico

A menudo, desea capturar el contenido de la página después de que el usuario intreaccionó de alguna manera, por ejemplo, después de completar un formulario. GrabzIt le permite hacer esto al proporcionar ConvertPage método. Esto envía el HTML actual de la página web junto con la URL de la página web a GrabzIt. Luego se recrea en un navegador y se convierte into una imagen, documento DOCX o PDF.

Sin embargo, para resuelva cualquier recurso como CSS o imágenes a las que se haga referencia a través de URL. Este método debe llamarse en una página web accesible en el 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>

El ejemplo crea una copia de la fuente de una página web, la actualiza con cualquier valor de formulario y la pasa a GrabzIt para su conversión. Como solo queremos capturar el div divSection, como se muestra arriba, lo estamos pasando como un objetivo. Sin embargo, no puede especificar los parámetros JSON y capturar toda la página web, ya que ha sido actualizada por el usuario.

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

Cómo se puede recortar un PDF al apuntar a un elemento HTML puede ser controlado utilizando estas técnicas.

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

Dependiendo de la naturaleza del sitio web que esté capturando, también puede usar este enfoque para capturar contenido detrás de un inicio de sesión. Simplemente use el enfoque anterior, con o sin los parámetros de destino que desee. Entonces, siempre y cuando los recursos de la página no estén restringidos de ninguna manera, debería poder capturar el contenido de la página web como lo ve el usuario.