Capturar uma div com a API de captura de tela 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 CSS, você precisará encontrar o elemento HTML que deseja capturar. Para fazer isso, observe a origem da página da Web 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.

Converter elemento HTML em imagem
Converter elemento HTML em PDF
Converter elemento HTML em DOCX

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

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" data-gt-translate-attributes='[{"attribute":"value","format":"json"}]' 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.

Converter conteúdo dinâmico em imagem
Converter conteúdo dinâmico em PDF
Converter conteúdo dinâmico em DOCX

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

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

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.