Capture a Div with JavaScript Screenshot API

A common requirement is how to capture just the contents of a single HTML element in an HTML page. E.g a div, span or canvas element.

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 sign up for free and then download our free JavaScript library.

Once you do this, capturing an HTML element is easy. You just need to pass the CSS selector of the element you wish to capture to the target parameter.

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>

So for instance to screenshot only the div above with the id of features use the JavaScript code below.

Convert HTML Element to Image
Convert HTML Element to PDF
Convert HTML Element to DOCX

This JavaScript additionally autosizes the resultant image screenshot to the same dimensions as the targeted HTML element. By setting the bheight, height and width parameters 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 and nothing else.

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

Of course, you can also capture HTML elements when converting HTML to an image, PDF or DOCX. Just replace the method ConvertURL with ConvertHTML above.

Capturing Dynamic Content

Often you want to capture page content after the user has interacted with it in some way, for instance after filling out a form. GrabzIt enables you to do this by providing the 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" 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, as shown above we are passing that as a target. However you could not specify the JSON parameters and capture the whole webpage as it has been updated by the user.

Convert Dynamic Content to Image
Convert Dynamic Content to PDF
Convert Dynamic Content to 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>

How a PDF is cropped when targeting a HTML element can be controlled using these techniques.

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

Depending on the nature of the website you are capturing you may also use this approach to capture content that is behind a 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.