Occasionally, Ctrl-F isn’t quite sufficient. When dealing with an extensive array of documents, the task of locating particular phrases or identifying sources within metadata can become quite daunting. Fortunately, there’s a solution in the form of full-text search, a feature that scans an entire collection and furnishes comprehensive results. When working with PDFs, the can serve as your go-to tool for executing full-text searches. In this article, we’ll guide you through the process of integrating Foxit into your system to conduct precise full-text searches on PDF documents. Foxit PDF SDK Why Does Full-Text Search on PDFs Often Fail? PDF files are designed to preserve the original formatting of a document, including layouts, fonts, and graphics. They can be viewed on any computer or device with PDF support while maintaining their original appearance. Therefore, for a full-text search to yield accurate results, the text must be extracted from the PDF files as a preliminary step. What is Foxit? Foxit is a versatile software suite offering a wide range of PDF solutions. It empowers users to perform tasks such as creating, editing, signing, merging, annotating, protecting, and scanning PDF files. In addition to these capabilities, Foxit incorporates user-friendly collaboration features that facilitate form-filling and information sharing with peers and collaborators. Notably, Foxit excels in rendering PDF files swiftly, even with large documents, all while consuming minimal system memory resources. Furthermore, Foxit caters to developers by providing software development kits (SDKs) and plug-ins that can be seamlessly integrated into various applications. Foxit’s software is compatible with a variety of platforms, ensuring accessibility across different operating systems. To explore further details about Foxit and its offerings, you can visit their . official website How Does Foxit SDK Let You Search Text in a PDF? The challenge of locating text within a PDF lies in the way the PDF format organizes text and objects. The Foxit SDK addresses this challenge by meticulously noting the characteristics of these objects, including their location, size, and rotation angle for display purposes. This meticulous approach simplifies the process of searching for specific words or content within your document, as the SDK allows you to customize the search engine to accommodate common occurrences. This functionality applies to all text contained within the PDF, regardless of the document’s encoding type or language. To expedite the search process, the software employs SQLite to analyze the document, resulting in rapid response times. Prerequisites To get started, first, you’ll need to have the following: Foxit Web SDK Node and NPM Building the Example App The first thing you need to do is download the SDK in Zip format and extract it. Your folder structure should look like this. After extracting the app, you’ll find a file that contains all the packages used. package.json Install the packages with the following command: `npm install` After installing the packages, the next step is to start the local server: `npm start` To access the server, use the following address: Complete web viewer: http://localhost:8080/examples/UIExtension/complete_webViewer/ Basic web viewer: http://localhost:8080/examples/UIExtension/basic_webViewer/ Setting up a New JavaScript Web App with Foxit We will be using the Foxit PDF SDK to build a web app that has a full PDF viewer feature. \Follow the instructions below to get started: Create a new folder for the project From the SDK you downloaded earlier, copy the , , and folders and the file into the new folder you created. (Only copy the external folder if you want to use font resources0. lib server external package.json Add a PDF file to the new folder also (this is for test purposes). Lastly, create an file in the new folder. index.html Now, this is what your file structure should look like: rnewFolder
+-- lib (copied from the Foxit_PDF_SDK)
+-- server (copied from the Foxit_PDF_SDK)
+-- package.json (copied from the Foxit_PDF_SDK)
+-- index.html (You created this file)
+-- youOwn.pdf (sample pdf you added to the folder)
+-- external (optional file from Foxit_PDF_SDK for font resources) Now, open your code editor and add the following code snippet in your . index.html <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foxit Web SDK Practice</title>
<style>
.fv__ui-tab-nav li span {
color: #636363;
} .f
lex-row {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
</body><br></html> Let’s import styles from the file we copied. We’ll be adding it to the tag. lib <head> <link rel="stylesheet" href="./lib/PDFViewCtrl.css"> Also, import the script library from the folder. lib <script src="./lib/PDFViewCtrl.full.js" charset="utf-8"></script> Add element between the tag; this will be the web viewer container. <div> <body> <div id="pdf-viewer"></div> Initialize the PDF viewer before the closing body tag. <script>
const licenseSN = "Your license SN";
const licenseKey = "Your license Key";
const PDFViewer = PDFViewCtrl.PDFViewer;
const pdfViewer = new PDFViewer({
libPath: './lib', // the library path of Web SDK.
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey,
}
});
pdfViewer.init('#pdf-viewer'); // the div (id="pdf-viewer")
</script> You can get the trial license key and license SN from the file in the examples folder from the SDK folder. Get the PDF document. license-key.js fetch('./JavaScript-for-Kids.pdf').then( (res) => {
    //modify the path to get your pdf
    res.arrayBuffer().then( (buffer) => {
    pdfViewer.openPDFByFile(buffer);
  })
}) These are the key settings we need to set up Foxit. The complete HTML file should look like this: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foxit Web SDK Practice</title>
<link rel="stylesheet" href="./lib/PDFViewCtrl.css">
<script src="./lib/PDFViewCtrl.full.js" charset="utf-8"></script>
<style>
.fv__ui-tab-nav li span {
color: #636363;
}.f
lex-row {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div id="pdf-viewer"></div>
<script>
const licenseSN = "Your license SN";
const licenseKey = "Your license Key";
const PDFViewer = PDFViewCtrl.PDFViewer;
const pdfViewer = new PDFViewer({
libPath: './lib', // the library path of Web SDK.
jr: {licenseSN: licenseSN,
licenseKey: licenseKey,
}
});
pdfViewer.init('#pdf-viewer'); // the div (id="pdf-viewer")
fetch('./JavaScript-for-Kids.pdf').then((res) => {
// modify the path to get your pdf
res.arrayBuffer().then(function (buffer) {
pdfViewer.openPDFByFile(buffer);
})
})
</script>
</body>
</html> Integrating the Complete Web Viewer Package We just finished setting up the Basic package. Let’s move to the complete web-view package. First, import the styles: <link rel="stylesheet" href="./lib/UIExtension.css"> Next, import the script: <script src="./lib/UIExtension.full.js" charset="utf-8"></script> In the body tag, add a div tag: <div id="pdf-ui"></div> Initialize the Complete package extension: \ const pdfui = new UIExtension.PDFUI({
  viewerOptions: {libPath: './lib', // the library path of web sdk.
  jr: {
    licenseSN: licenseSN,
    licenseKey: licenseKey
    }
  },
  renderTo: '#pdf-ui' // the div (id="pdf-ui").
}); Finally, add the code to launch the PDF file: fetch('./JavaScript-for-Kids.pdf').then((res) => {
    // modify the path to get your pdf
    res.arrayBuffer().then((buffer) => {
    pdfui.openPDFByFile(buffer);
  })
}) How to Allow Users to Search a PDF with the Web SDK If the complete web-view SDK is integrated into your app, users can easily navigate the sidebar and find the search bar icon. However, you can also implement custom controls for your web app; the SDK provides you with a lot of customization that you can utilize to suit your project. Conclusion The stands as a fundamental document format, particularly for sharing and collaborative purposes. In this post, we’ve walked through the straightforward integration and execution of a full-text search on any PDF file, courtesy of the Foxit SDK. With this tool at your disposal, you should be well-equipped to conduct both rapid and advanced searches within your PDF libraries. PDF format For further insights and details, I encourage you to refer to the It can provide comprehensive guidance and additional resources to help you make the most of this powerful tool. Foxit documentation. Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Mastering Full-Text Searches on PDF Documents with Foxit PDF SDK

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Guide to Creating Custom Form Fields Using the Foxit PDF SDK for Web

An Introduction to the Power of Vector Search for Beginners

Don’t Waste Your Time With MySQL Full-Text Search

How to Implement Full-text Search in a Laravel Project

The Science Behind Full-Text Search Engines

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

A Guide to Creating Custom Form Fields Using the Foxit PDF SDK for Web

An Introduction to the Power of Vector Search for Beginners

Don’t Waste Your Time With MySQL Full-Text Search

How to Implement Full-text Search in a Laravel Project

The Science Behind Full-Text Search Engines

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps