Ferramentas para capturar e converter a Web

Capturar uma div com a API de captura de tela JavaScriptAPI JavaScript

Um requisito comum √© como capturar apenas o conte√ļdo de um √ļnico elemento HTML em uma p√°gina HTML. Por exemplo, um elemento div, span ou canvas.

No entanto, antes de capturar um √ļnico elemento HTML usando o c√≥digo do lado do cliente. Como imagem, PDF ou captura de tela DOCX. Voc√™ vai precisar cadastre-se gratuitamente e fa√ßa o download do nosso biblioteca JavaScript gratuita.

Feito isso, √© f√°cil capturar um elemento HTML. Voc√™ s√≥ precisa passar o Seletor CSS do elemento que voc√™ deseja capturar no alvo par√Ęmetro.

Para construir seu seletor de CSS, você precisará encontrar o ID ou a classe do elemento HTML que deseja capturar. Para fazer isso, consulte a fonte da página de destino. Um exemplo disso é mostrado abaixo.

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

Por exemplo, para capturar apenas a div acima com o ID de features, você pode baixar o Biblioteca JavaScript GrabzIt e use o código JavaScript abaixo.

Esse JavaScript tamb√©m dimensiona automaticamente a captura de tela da imagem resultante para as mesmas dimens√Ķes que o elemento HTML de destino, definindo bheight, height e dos width par√Ęmetros para -1. Quando a p√°gina √© carregada, uma captura de tela da imagem ser√° criada no mesmo local que o script etiqueta, r√≥tulo, palavra-chave. Isso conter√° todo o conte√ļdo do features div e nada mais.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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@3.4.7/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@3.4.7/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>

Obviamente, você também pode capturar elementos HTML ao converter HTML em uma imagem, PDF ou DOCX. Apenas substitua o método ConvertURL com ConvertHTML acima.

Capturando Conte√ļdo Din√Ęmico

Muitas vezes, voc√™ deseja capturar o conte√ļdo da p√°gina ap√≥s o usu√°rio intde alguma forma, por exemplo, depois de preencher um formul√°rio. O GrabzIt permite fazer isso fornecendo o ConvertPage m√©todo. Isso envia o HTML atual da p√°gina da Web, juntamente com o URL da p√°gina da Web para o GrabzIt. Em seguida, √© recriado em um navegador e convertido into uma imagem, documento DOCX ou PDF.

No entanto, para resolva quaisquer recursos, como CSS ou imagens, que são referenciados por URLs. Esse método deve ser chamado em uma página da web acessível no 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" value="Save"/>
    </form>
</div>

O exemplo cria uma c√≥pia da fonte de uma p√°gina da Web, atualiza-a com qualquer valor de formul√°rio e a passa para o GrabzIt para ser convertido. Como s√≥ queremos capturar a div divSection, como mostrado acima, estamos passando isso como um destino. No entanto, voc√™ n√£o pode especificar os par√Ęmetros JSON e capturar toda a p√°gina da Web, pois ela foi atualizada pelo usu√°rio.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

Como um PDF é cortado ao segmentar um elemento HTML pode ser controlado usando essas técnicas.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/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@3.4.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "docx"}).Create();
</script>

Dependendo da natureza do site que voc√™ est√° capturando, voc√™ tamb√©m pode usar essa abordagem para capturar conte√ļdo que √© atr√°s de um login. Basta usar a abordagem acima, com ou sem os par√Ęmetros de destino, conforme desejado. Ent√£o, desde que os recursos da p√°gina n√£o sejam restritos, voc√™ poder√° capturar o conte√ļdo da p√°gina da Web, conforme visto pelo usu√°rio.