Capture HTML elements with GrabzIt's API and Online Tool
Sometimes it may be necessary to capture these elements as images or convert them to PDFs for various purposes. In this article, we will discuss the importance of capturing HTML elements as images, DOCX and PDFs. As well as provide some tips on how to do so effectively.
Developers often use HTML elements like forms and charts to enhance the functionality of a website. These elements may also hold important information or data that you need to save or share. Save and share images of elements easily without worrying about changes to formatting or functionality when sharing with others.
But how to capture this information automatically? This is where using an API comes in useful. An API allows you to use some code to capture and save images of specific elements on a webpage. This is helpful for many things, like making documents, sharing info, or saving a picture of a webpage.
APIs provide additional custom options, like choosing the size, image format etc. Furthermore, using an API eliminates the need for manual screenshots, which can be time-consuming and prone to errors.
GrabzIt's API and Screenshot Tool make it possible to capture a HTML element contained within a web page or HTML snippet. You can then return this in multiple file formats such as images, PDF, or Word document.
To capture a HTML element, you need to uniquely identify it with a CSS selector. Such as a class, id or more complex CSS selector to identify the DOM node.
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
To convert a HTML element to image, set the width and height of the image to -1. So that the image matches the size of the targeted HTML element. Setting the browser height to -1 will make the window larger to fit the HTML element.
The 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 discover all the ways you can use GrabzIt's API.
//The client should be stored somewhere and reused!
GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret", client);
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);
await grabzIt.SaveToAsync("images/result.jpg");
The 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 discover 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 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 discover 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@<%= APIVersion.JavaScript %>/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 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 discover 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 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 discover 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 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 discover 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 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 discover 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 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 discover all the ways you can customize your captures.
https://api.grabz.it/convert?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 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 discover 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 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 discover all the ways you can use GrabzIt's API.
//The client should be stored somewhere and reused!
GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret", client);
DOCXOptions options = new DOCXOptions();
options.TargetElement = "#Article";
grabzIt.URLToDOCX("http://www.example.com/", options);
await grabzIt.SaveToAsync("documents/result.docx");
The 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 discover 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 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 discover 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@<%= APIVersion.JavaScript %>/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 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 discover 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 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 discover 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 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 discover 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 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 discover 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 code below shows how easy it is to start capturing HTML elements as Word documents from web pages with our REST API. Then check out the API documentation for the REST API to discover all the ways you can customize your captures.
https://api.grabz.it/convert?key=Sign in to view your Application Key&target=%23Article&format=docx&url=https%3A%2F%2Fwww.example.com%2F
The 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 discover 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
When you convert an HTML element to a PDF, it will appear in the top-left corner of the page, just as in DOCX. With the PDF API, you can automatically adjust set the page size so that it matches the size of the HTML element.
The code below shows how easy it is to start capturing HTML elements as PDF files 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 discover all the ways you can use GrabzIt's API.
//The client should be stored somewhere and reused!
GrabzItClient grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret", client);
PDFOptions options = new PDFOptions();
options.TargetElement = "#Article";
grabzIt.URLToPDF("http://www.example.com/", options);
await grabzIt.SaveToAsync("documents/result.pdf");
The 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 discover 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 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 discover 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@<%= APIVersion.JavaScript %>/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 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 discover 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 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 discover 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 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 discover 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 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 discover 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 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 discover all the ways you can customize your captures.
https://api.grabz.it/convert?key=Sign in to view your Application Key&target=%23Article&format=pdf&url=https%3A%2F%2Fwww.example.com%2F
The 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 discover 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
You can capture HTML elements with our Online Screenshot Tool when setting up your Scheduled Task. Just ensure you set the Target Element field to the CSS selector of the HTML element you wish to capture. To control the cropping of PDF documents you will also need to set the Custom Page Size fields as well.