Tools to Capture and Convert the Web
capture HTML element

Capture HTML elements with GrabzIt

GrabzIt's API and Screenshot Tool make it possible to capture a HTML element contained within a web page or HTML snippet. This can then be returned as an image, PDF or Word document.

The only requirement is that the HTML element to capture has a unique CSS selector such as a class, id or more complex CSS selector to identify it.

In the following examples we will capture the content in the DIV below. 

...
<div id="Article">
<p>This is the content I am interested in.</p>
<img src="myimage.jpg">
</div>
...

Capture HTML Element as Image

Set the width and height of the image to -1 so that the image matches the size of the targeted HTML element. By setting the browser height to -1 the length of the browser window will also automatically increase to ensure that if the targeted HTML element fits into the browser.

The example code below shows how easy it is to start capturing HTML elements as images from web pages using ASP.NET. To start creating images just download the ASP.NET Library, get your key and secret and then use the demo contained within. Then check out the API documentation for ASP.NET to find out all the ways you can use GrabzIt's API.

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

ImageOptions options = new ImageOptions();
options.OutputWidth = -1;
options.OutputHeight = -1;
options.BrowserHeight = -1;
options.Format = ImageFormat.jpg;
options.TargetElement = "#Article";

grabzIt.URLToImage("http://www.example.com/", options);
grabzIt.SaveTo("images/result.jpg");

The example code below shows how easy it is to start capturing HTML elements as images from web pages using Java. To start creating images just download the Java Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Java to find out all the ways you can use GrabzIt's API.

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

ImageOptions options = new ImageOptions();
options.setWidth(-1);
options.setHeight(-1);
options.setBrowserHeight(-1);
options.setFormat(ImageFormat.JPG);
options.setTargetElement("#Article");

grabzIt.URLToImage("http://www.example.com/", options);
grabzIt.SaveTo("images/result.jpg");

The example code below shows how easy it is to start capturing HTML elements as images from web pages using JavaScript. To start creating images download GrabzIt's JavaScript Library. Then get your key and secret, add the domain you want to use the JavaScript on and then check out the API documentation for JavaScript to find out all the ways you can use GrabzIt's API.

When using the JavaScript API it is also possible to capture dynamic content of a HTML element.

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

The example code below shows how easy it is to start capturing HTML elements as images from web pages using Node.js. To start creating images just download the Node.js Package, get your key and secret and then use the demo contained within. Then check out the API documentation for Node.js to find out all the ways you can use GrabzIt's API.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
// The minus ones indicates that image should not be cropped
var options = {"browserHeight":-1, "width":-1, "height":-1, "format":"jpg", "target":"#Article"};

client.url_to_image("http://www.example.com/", options);
client.save_to("images/result.jpg", function (error, id){
    if (error != null){
        throw error;
    }
});

The example code below shows how easy it is to start capturing HTML elements as images from web pages using Perl. To start creating images just download the Perl Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Perl to find out all the ways you can use GrabzIt's API.

#!/usr/bin/perl

use GrabzItClient;

$grabzIt = GrabzItClient->new("Sign in to view your Application Key", "Sign in to view your Application Secret");

$options = GrabzItImageOptions->new();
$options->browserHeight(-1);
$options->width(-1);
$options->height(-1);
$options->targetElement("#Article");

$grabzIt->URLToImage("http://www.example.com/", $options);
$grabzIt->SaveTo("images/result.jpg");

The example code below shows how easy it is to start capturing HTML elements as images from web pages using PHP. To start creating image files just download the PHP Library, get your key and secret and then use the demo contained within. Then check out the API documentation for PHP to find out all the ways you can use GrabzIt's API.

include("GrabzItClient.php");

$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

// The -1 indicates that image should not be cropped
$options = new \GrabzIt\GrabzItImageOptions();
$options->setWidth(-1);
$options->setHeight(-1);
$options->setBrowserHeight(-1);
$options->setFormat("jpg");
$options->setTargetElement("#Article");

$grabzIt->URLToImage("http://www.example.com/", $options);
$grabzIt->SaveTo("images/result.jpg");

The example code below shows how easy it is to start capturing HTML elements as images from web pages using Python. To start creating images just download the Python Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Python to find out all the ways you can use GrabzIt's API.

from GrabzIt import GrabzItClient

grabzIt = GrabzItClient.GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret")

# The -1 indicates that image should not be cropped
options = GrabzItImageOptions.GrabzItImageOptions()
options.width = 250
options.height = 250
options.browserHeight = -1
options.format = "jpg"
options.targetElement = "#Article"

grabzIt.URLToImage("http://www.example.com/", options)
grabzIt.SaveTo("images/result.jpg")

The example code below shows how easy it is to start capturing HTML elements as images from web pages using our REST API. Then check out the API documentation for the REST API to find out all the ways you can customize your captures.

https://api.grabz.it/services/convert.ashx?key=Sign in to view your Application Key&width=-1&height=-1&bheight=-1&target=%23Article&format=jpg&url=https%3A%2F%2Fwww.example.com%2F

The example code below shows how easy it is to convert HTML to a JPG format using Ruby. To start creating images just download the Ruby Gem, get your key and secret and then use the demo contained within. Then check out the API documentation for Ruby to find out all the ways you can use GrabzIt's API.

require 'grabzit'

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1
options.targetElement = "#Article"

grabzItClient.url_to_image("http://www.example.com/", options)
grabzItClient.save_to("images/result.jpg")

Capture HTML Element as DOCX

When converting a captured HTML element into a Word document the captured HTML element will appear in the top-left of the Word document page.

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using ASP.NET. Although GrabzIt's ASP.NET library is compatible with any .NET language. To start creating PDF's just download the ASP.NET Library, get your key and secret and then use the demo contained within. Then check out the API documentation for ASP.NET to find out all the ways you can use GrabzIt's API.

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

DOCXOptions options = new DOCXOptions();
options.TargetElement = "#Article";

grabzIt.URLToDOCX("http://www.example.com/", options);
grabzIt.SaveTo("documents/result.docx");

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using Java. To start creating DOCX's just download the Java Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Java to find out all the ways you can use GrabzIt's API.

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

DOCXOptions options = new DOCXOptions();
options.setTargetElement("#Article");

grabzIt.URLToDOCX("http://www.example.com/", options);
grabzIt.SaveTo("documents/result.docx");

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using JavaScript. To start creating DOCX's download GrabzIt's JavaScript Library. Then get your key and secret, add the domain you want to use the JavaScript on and then check out the API documentation for JavaScript to find out all the ways you can use GrabzIt's API.

When using the JavaScript API it is also possible to capture dynamic content of a HTML element.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.1/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/",
{"format": "docx", "target": "#Article"}).Create();
</script>

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using Node.js. To start creating DOCX's just download the Node.js Package, get your key and secret and then use the demo contained within. Then check out the API documentation for Node.js to find out all the ways you can use GrabzIt's API.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
client.url_to_docx("http://www.example.com/", {"targetElement": "#Article"});
client.save_to("documents/result.docx", function (error, id){
    if (error != null){
        throw error;
    }
});

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using Perl. To start creating DOCX's just download the Perl Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Perl to find out all the ways you can use GrabzIt's API.

#!/usr/bin/perl

use GrabzItClient;

$grabzIt = GrabzItClient->new("Sign in to view your Application Key", "Sign in to view your Application Secret");

$options = GrabzItDOCXOptions->new();
$options->targetElement("#Article");

$grabzIt->URLToDOCX("http://www.example.com/", $options);
$grabzIt->SaveTo("documents/result.docx");

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using PHP. To start creating DOCX's just download the PHP Library, get your key and secret and then use the demo contained within. Then check out the API documentation for PHP to find out all the ways you can use GrabzIt's API.

include("GrabzItClient.php");

$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

$options = new \GrabzIt\GrabzItDOCXOptions();
$options->setTargetElement("#Article");

$grabzIt->URLToDOCX("http://www.example.com/", $options);
$grabzIt->SaveTo("documents/result.docx");

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using Python. To start creating DOCX's just download the Python Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Python to find out all the ways you can use GrabzIt's API.

from GrabzIt import GrabzItClient

grabzIt = GrabzItClient.GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzItDOCXOptions.GrabzItDOCXOptions()
options.targetElement = "#Article"

grabzIt.URLToDOCX("http://www.example.com/", options)
grabzIt.SaveTo("documents/result.docx")

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using our REST API. Then check out the API documentation for the REST API to find out all the ways you can customize your captures.

https://api.grabz.it/services/convert.ashx?key=Sign in to view your Application Key&target=%23Article&format=docx&url=https%3A%2F%2Fwww.example.com%2F

The example code below shows how easy it is to start capturing HTML elements as Word documents from web pages using Ruby. To start creating DOCX's just download the Ruby Gem, get your key and secret and then use the demo contained within. Then check out the API documentation for Ruby to find out all the ways you can use GrabzIt's API.

require 'grabzit'

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::DOCXOptions.new()
options.targetElement = "#Article"

grabzItClient.url_to_docx("http://www.example.com/", options)

grabzItClient.save_to("documents/result.docx")

Capture HTML Element as PDF

By default when converting a captured HTML element into a PDF document the captured HTML element will appear in the top-left of the PDF page in the same fashion as for DOCX. However in PDF it is also possible to automatically set the page size so that it matches the size of the HTML element.

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using ASP.NET. Although GrabzIt's ASP.NET library is compatible with any .NET language. To start creating PDF's just download the ASP.NET Library, get your key and secret and then use the demo contained within. Then check out the API documentation for ASP.NET to find out all the ways you can use GrabzIt's API.

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

PDFOptions options = new PDFOptions();
options.TargetElement = "#Article";

grabzIt.URLToPDF("http://www.example.com/", options);
grabzIt.SaveTo("documents/result.pdf");

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using Java. To start creating PDF's just download the Java Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Java to find out all the ways you can use GrabzIt's API.

GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

PDFOptions options = new PDFOptions();
options.setTargetElement("#Article");

grabzIt.URLToPDF("http://www.example.com/", options);
grabzIt.SaveTo("documents/result.pdf");

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using JavaScript. To start creating PDF's download GrabzIt's JavaScript Library. Then get your key and secret, add the domain you want to use the JavaScript on and then check out the API documentation for JavaScript to find out all the ways you can use GrabzIt's API.

When using the JavaScript API it is also possible to capture dynamic content of a HTML element.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.1/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/",
{"format": "pdf", "target": "#Article"}).Create();
</script>

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using Node.js. To start creating PDF's just download the Node.js Package, get your key and secret and then use the demo contained within. Then check out the API documentation for Node.js to find out all the ways you can use GrabzIt's API.

var grabzit = require('grabzit');

var client = new grabzit("Sign in to view your Application Key", "Sign in to view your Application Secret");
grabzIt.url_to_pdf("http://www.example.com/", {"targetElement":"#Article"});
client.save_to("documents/result.pdf", function (error, id){
    if (error != null){
        throw error;
    }
});

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using Perl. To start creating PDF's just download the Perl Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Perl to find out all the ways you can use GrabzIt's API.

#!/usr/bin/perl

use GrabzItClient;

$grabzIt = GrabzItClient->new("Sign in to view your Application Key", "Sign in to view your Application Secret");

$options = GrabzItPDFOptions->new();
$options->targetElement("#Article");

$grabzIt->URLToPDF("http://www.example.com/", $options);
$grabzIt->SaveTo("documents/result.pdf");

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using PHP. To start creating PDF's just download the PHP Library, get your key and secret and then use the demo contained within. Then check out the API documentation for PHP to find out all the ways you can use GrabzIt's API.

include("GrabzItClient.php");

$grabzIt = new \GrabzIt\GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

$options = new \GrabzIt\GrabzItPDFOptions();
$options->setTargetElement("#Article");

$grabzIt->URLToPDF("http://www.example.com/", $options);
$grabzIt->SaveTo("documents/result.pdf");

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using Python. To start creating PDF's just download the Python Library, get your key and secret and then use the demo contained within. Then check out the API documentation for Python to find out all the ways you can use GrabzIt's API.

from GrabzIt import GrabzItClient

grabzIt = GrabzItClient.GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzItPDFOptions.GrabzItPDFOptions()
options.targetElement = "#Article"

grabzIt.URLToPDF("http://www.example.com/", options)
grabzIt.SaveTo("documents/result.pdf")

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using our REST API. Then check out the API documentation for the REST API to find out all the ways you can customize your captures.

https://api.grabz.it/services/convert.ashx?key=Sign in to view your Application Key&target=%23Article&format=pdf&url=https%3A%2F%2Fwww.example.com%2F

The example code below shows how easy it is to start capturing HTML elements as PDF from web pages using Ruby. To start creating PDF's just download the Ruby Gem, get your key and secret and then use the demo contained within. Then check out the API documentation for Ruby to find out all the ways you can use GrabzIt's API.

require 'grabzit'

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::PDFOptions.new()
options.targetElement = "#Article"

grabzItClient.url_to_pdf("http://www.example.com/", options)

grabzItClient.save_to("documents/result.pdf")

Capturing HTML Elements in the Screenshot Tool

The ability to capture HTML elements is also available in our Online Screenshot Tool when creating your scheduled task just ensure you set the Target Element field with the CSS selector of the HTML element you wish to capture. If you wish to control the cropping of PDF documents you will also need to set the Custom Page Size fields as well.

Terms and Conditions
Privacy Policy
Service Level Agreement
© GrabzIt® 2021
EnglishChinese (Simplified)FrenchGermanHindiRussianSpanish