This tutorial and the sample source code explain implementing an HTML table and applying search on it using the HTML template functionality and search endpoint of PDF.co Web API in JavaScript programming language. The users can use these endpoints to create complex PDF structures using HTML templates and apply search on any PDF file to find any particular text.
This tutorial utilizes two endpoints to complete the tasks, i.e. generate PDF from an HTML template and search text. Therefore, the users will go through both endpoints separately.
- Generate PDF from HTML Template
- Generate PDF using JavaScript
- Search Text using PDF.co in JavaScript
- Search PDF using Javascript
Generate PDF from HTML Template
The users can use PDF.co’s “HTML Template to PDF” API endpoint to create their PDF files from HTML code or online template. They can create the templates in the file section of PDF.co or can directly write the HTML code in the HTML parameter of the API endpoint. Moreover, they can create reusable templates with texts, images, custom CSS and javascript, barcodes, conditional logic, and more.
Endpoint Parameters for PDF Generation
Following are the endpoint parameters for single-word replacement:
1. html
It is a required parameter in which the users give HTML templates with Handlebars and Mustache templates.
2. templateData
It is also a required parameter. This parameter stores a string. Users must set this parameter to a string with the input JSON data. The users can also utilize the recommended JSON data as input or use the data from the CSV.
3. margins
It is an optional parameter. It is set to CSS style margins for all the sides or in the order of top, right, bottom, and left. For example, “5px 5px 5px 5px”.
4. orientation
It is an optional parameter. It is set to “Portrait” by default, but the users can change it to “Landscape”.
5. paperSize
It is an optional parameter. It is set to Letter by default. The users can use other options like Legal, Ledger, Tabloid, A0, A1, A2, A3, A4, A5, A6, or any customized size. The customized size could be in pixels or inches with customized width and height.
6. printBackground
It is an optional parameter. The parameter is set to true by default, but the users can change it to false to disable the background printing.
7. header
It is an optional parameter. It is set to HTML for the header to be applied on every page at the top.
8. footer
It is an optional parameter. It is set to HTML for the footer to be applied on every page at the bottom.
9. async
It is an optional parameter to run the processing asynchronously. It is set to “false” by default.
Note: If the users are working with the JSON input, they have to make sure to escape it using “JSON.stringify(dataObject) in JavaScript. Escaping means replacing every “ with \”. Most programming languages perform it automatically. However, the users must ensure this replacement step while working with JavaScript.
Generate PDF using JavaScript
The following source code explains creating a basic HTML table using the PDF.co “PDF from HTML Templates” API. The sample code in JavaScript also demonstrates the usage of template data, i.e., the data the users can insert into the HTML template using the variables. They can also create a JSON file for the “templateData” and pass it to the parameter. So, the API request will connect the JSON file and the HTML template and create a PDF file containing the data from templateData.
Sample Code
Following is the sample code in JavaScript to create a PDF table using the HTML template:
var https = require("https");
const API_KEY ="***************";
// Prepare request to `convert from html template` API endpoint
var queryPath = `/v1/pdf/convert/from/html`;
// JSON payload for api request
var jsonPayload = JSON.stringify({
html: "<h2>A basic HTML table</h2><table><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>{{variable1}}</td><td>{{variable2}}</td><td>{{variable3}}</td></tr></table>",
name: "result.pdf",
margins: "10px 10px 10px 10px",
paperSize: "Letter",
orientation: "Portrait",
printBackground: true,
header: "",
footer: "",
async: false,
encrypt: false,
templateData:
'{"variable1": "FBI", "variable2": "Maria", "variable3": "US"}',
});
var reqOptions = {
host: "api.pdf.co",
method: "POST",
path: queryPath,
headers: {
"x-api-key": API_KEY,
"Content-Type": "application/json",
"Content-Length": Buffer.byteLength(jsonPayload, "utf8"),
},
};
// Send request
var postRequest = https
.request(reqOptions, (response) => {
response.on("data", (d) => {
// Parse JSON response
var data = JSON.parse(d);
if (data.error == false) {
console.log(data.url);
} else {
// Service reported error
console.log(data.message);
}
});
// console.log(response)
})
.on("error", (e) => {
// Request error
console.log(e);
});
// Write request data
postRequest.write(jsonPayload);
postRequest.end();
Generate PDF Step by Step
The above code demonstrates the use of an HTML template to PDF API by taking in HTML code with HTML table tags in it. The users can see the variables within the curly braces that are the values that users can add to their templates to make the table more generic and reusable. So it is easier to change their values or add information to the table. Moreover, the code has pre-defined margins for the page, orientation, and paper size. The API takes all these parameters and generates the PDF file accordingly.
Output of Generated PDF
Below is the screenshot of the output PDF file generated using HTML templates:
Generate PDF – Video Guide
Below is the output gif to demonstrate the working of the code:
Search Text using PDF.co in JavaScript
The users can use this “PDF Search Text” endpoint of PDF.co web API to search text in the PDF file. The users may need to find the existence or the repetition of particular words to analyse the frequency of the text in a PDF table or use it for other purposes. This endpoint takes the URL link and other optional parameters to search the PDF file for the required text.
Endpoint Parameters
Following are a few of the parameters of PDF Forms Info Reader endpoint:
1. url
It is a required parameter: a string containing the URL to the PDF file from which the user wants to find the text. The users can provide links to their files hosted on online storage systems such as google drive, Dropbox, and PDF.co cloud storage. Moreover, the users can check the file upload sections of the API to upload their files via the API.
2. httpusername
It is an optional parameter which is a string containing the “http auth username” to access the source file.
3. httppassword
It is an optional parameter, a string containing the “http auth password” to access the source file.
4. searchString
It is a required parameter, a string containing the text to search, and can also contain regular expressions.
5. regexSearch
It is an optional parameter that can only be true or false. The users must set its value to true to use regular expressions in the “searchString” parameter.
6. pages
It is an optional parameter, a string containing the comma-separated list of the page numbers that the API has to process. The users can set the range using the dash “-” symbol. Moreover, the first page starts at zero (0).
7. inline
It is an optional parameter that can only be true or false.
8. wordMatchingMode
It is an optional parameter which is a string. The users can set its value to: “ExactMatch,” “None,” or “SmartMatch.”
9. profiles
It is an optional parameter, a string to set additional configurations for more options.
Search PDF using Javascript
The following source code explains to users how to search text in a PDF file using PDF.co web API. This code takes the output PDF file of the above-generated code and searches for the required information.
Sample Code for PDF Search
Below is the sample code to search text in the PDF file:
// `request` module is required for file upload.
// Use "npm install request" command to install.
var request = require("request");
// The authentication key (API Key).
// Get your own by registering at https://app.pdf.co
const API_KEY = "*********************";
// Direct URL of source PDF file.
// You can also upload your own file into PDF.co and use it as url. Check "Upload File" samples for code snippets: https://github.com/bytescout/pdf-co-api-samples/tree/master/File%20Upload/
const SourceFileUrl =
"https://pdf-temp-files.s3.us-west-2.amazonaws.com/ANPYUIBFYK867B72K53ILKW1792HVOX6/result.pdf?X-Amz-Expires=3600&X-Amz-Security-Token=FwoGZXIvYXdzEKv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDGyZ74lx%2F3CuTGEicCKCAeJp9oIPrktBN9mRRzU59PFIVzIXFJBlRrW0vLVp7xEewWO2XKXwwAJaIaFgsSBTcussnyYRdb1DxFsLbgsp1qnGvN5xcDxZbgXl68Hf%2FTMQjvnKmAfFWccWtmcfR5XwXi86v%2BmeVGqoilsmSn6OseJnoVdqhfONm6HC9v3oUiUWPvUovcTsnwYyKJv9SGsIu%2BSkIzPXpGaC7QSsgWCxWxuSgVPPh7R47tjgb%2Fryfb7Npds%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIA4NRRSZPHNI66MWUB/20230226/us-west-2/s3/aws4_request&X-Amz-Date=20230226T100107Z&X-Amz-SignedHeaders=host&X-Amz-Signature=23fd74a6c6ec226ff36d89e8d909699e1cf20e3db90ee8c64151602338e6f761";
// Comma-separated list of page indices (or ranges) to process. Leave empty for all pages. Example: '0,2-5,7-'.
const Pages = "";
// PDF document password. Leave empty for unprotected documents.
const Password = "";
// Search string.
const SearchString = "Maria"; // Regular expression to find numbers in format dd.dd and between 40.00 to 99.99
// Enable regular expressions (Regex)
// const RegexSearch = "True";
// Prepare URL for PDF text search API call.
// See documentation: https://apidocs.pdf.co
var query = `https://api.pdf.co/v1/pdf/find`;
let reqOptions = {
uri: query,
headers: { "x-api-key": API_KEY },
formData: {
password: Password,
pages: Pages,
url: SourceFileUrl,
searchString: SearchString,
// regexSearch: RegexSearch,
},
};
// Send request
request.post(reqOptions, function (error, response, body) {
if (error) {
return console.error("Error: ", error);
}
// Parse JSON response
let data = JSON.parse(body);
for (let index = 0; index < data.body.length; index++) {
const element = data.body[index];
console.log(
"Found text " +
element["text"] +
" at coordinates " +
element["left"] +
", " +
element["top"]
);
}
});
Output – PDF Search with JavaScript
Below is the screenshot of the code output obtained in the API response:
Video Guide – PDF Search with JavaScript
Below is the working demonstration of the above code:
