Tools to Capture and Convert the Web

Capture a Screenshot of a Div with JavaScriptJavaScript API

A common requirement is how to capture just the contents of a single HTML element such as a div or a span. But before you can capture a single HTML element as an image, PDF or DOCX screenshot, you will need to sign up for free and then download our free JavaScript library.

Once this is done it is easy to capture a HTML element you just need to pass the CSS selector of the element you wish to capture to the target parameter. In order to construct your CSS selector you will need to find the id or class of the HTML element that you want to capture, to do this look at the source of the target webpage. An example of which is shown 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 eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
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, you can download the GrabzIt JavaScript library and then use the JavaScript below.

This JavaScript additionally autosizes the resultant image screenshot to the same dimensions as the targetted HTML element by setting the bheight, height and width parameters to -1. When the page is loaded an image screenshot will now be created in the same location as the script tag, which will contain all of the contents of the features div and nothing else.

<script src="https://cdn.jsdelivr.net/gh/GrabzIt/grabzit@js-3.2.9.9/javascript/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/gh/GrabzIt/grabzit@js-3.2.9.9/javascript/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/gh/GrabzIt/grabzit@js-3.2.9.9/javascript/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 or PDF document. 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 were it is recreated in a browser and converted into an image, DOCX or PDF document. However in order to resolve any resources such as CSS, JavaScript or images that are referenced using relative URL's this method must be called on a webpage accessible on the 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>

The example creates a copy of the source of a webpage updates it with any form values and passes it to GrabzIt to be converted. 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.

<script src="https://cdn.jsdelivr.net/gh/GrabzIt/grabzit@js-3.2.9.9/javascript/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "bheight": -1, "height": -1, "width": -1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/gh/GrabzIt/grabzit@js-3.2.9.9/javascript/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/gh/GrabzIt/grabzit@js-3.2.9.9/javascript/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, and as long as the page resources are not restricted in anyway you should be able to capture the webpage content as seen by the user.