Tools to Capture and Convert the Web

Capture a Div with JavaScript Screenshot API

JavaScript 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. 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 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
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, you can download the GrabzIt JavaScript library and then use the JavaScript code below.

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 is loaded an image screenshot will be created in the same location as the script tag. This will contain all of 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. It is then recreated in a browser and converted into an image, DOCX or PDF document.

However in order to resolve any resources such as CSS or images that are referenced via URLs. This method must be called on a web page 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/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 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.