The PDF format has become indispensable in modern software, serving as a versatile solution for diverse document types. For businesses seeking secure, editable, and user-friendly PDFs, emerges as a valuable choice. boast a rich array of features catering to various industries. Foxit Foxit’s PDF SDK libraries Web browser-based PDFs, in particular, find myriad applications in document management. They play a pivotal role in numerous banking systems, facilitating tasks such as generating monthly statements. Additionally, the compliance industry relies on web-based PDFs for secure data collection and storage. This tutorial guides you through leveraging the Foxit PDF SDK for Web to craft customized form fields within your web browser PDF documents. The accompanying allows you to follow along and implement the steps outlined in the tutorial. GitHub repository What is Foxit PDF SDK for Web? , among the diverse PDF SDKs offered by Foxit, stands out as an all-encompassing PDF library that leverages the advantages of Foxit’s rendering engine. This SDK empowers you to seamlessly integrate a comprehensive and fully customizable PDF viewer into your applications. The Foxit PDF SDK for Web Web PDFs crafted with Foxit’s SDK enable users to effortlessly view, fill out, annotate, and sign documents in various languages directly from their mobile or desktop browsers using JavaScript. The SDK is compatible with all major browsers, including Firefox, Safari, Chrome, and Opera. To illustrate the functionality, you will embark on creating a new PDF project from a template, employing the Foxit PDF SDK for Web to provide the necessary structure. This hands-on approach will offer a practical demonstration of how the SDK enhances PDF capabilities within your web-based projects. Implementing Foxit PDF SDK for Web Foxit PDF SDK for Web. The ZIP file should contain the SDK, documentation and examples. Download You can preview these examples by running an HTTP server from the unzipped directory. # NPX available with NPM v5.2 or newer
npx http-server Setup the Project This tutorial uses for frontend tooling. It’s based on ES modules (ESM), fast, and comes with everything you need to use the SDK out of the box. To create a new project from a template and start the development server, make sure you’ve got Node.js version 12.2.0 or newer and run the following commands: Vite npm create vite@latest project -- --template vanilla
cd project
npm install
npm run dev Move the SDK into the created directory. For the rest of this tutorial, the SDK is assumed to be available at , relative to the parent directory. ./FoxitPDFSDKForWeb project Loading the PDF You will need a PDF viewer with a document uploaded to begin experimenting. To initialize the PDF viewer, first create the HTML structure and load the SDK. 

<body>
<div class="container">
<div id="viewer"></div>
<div id="menu"></div>
</div>
<script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script>
<script type="module" src="/main.js"></script>
</body>
 Additionally, in , add some CSS to style the elements: style.css /* style.css */
html {
height: 100%;
}b
ody {
height: 100%;
margin: 0;
}.
container {
width: 100%;
height: 100%;
display: flex;
}#
viewer {
height: 100%;
flex: 1;
overflow: auto;
}#
menu {
width: 10rem;
}.
menu-element {
background: #f1f5f9;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;font-family: monospace;
margin: 0.5rem;
} Inside , use the SDK to create an instance of the : main.js pdfViewer import "./style.css";
const licenseSN = "...";
const licenseKey = "...";
const viewerContainer = document.getElementById("viewer");
const pdfViewer = new PDFViewCtrl.PDFViewer({
libPath: "./FoxitPDFSDKForWeb/lib",
jr: {
licenseSN,
licenseKey,
},
customs: {
ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer),
},
}); You can find your values for and inside the file. licenseSN licenseKey ./FoxitPDFSDKForWeb/examples/license-key.js The pdfViewer is created by providing the constructor with a configuration object containing: The relative path to the folder of the unzipped SDK package libPath: lib Config options for the JR engine that include, most importantly, licensing information jr: A custom component that controls PDF sizing and scrolling, where setting it adjusts the viewer to the container customs.ScrollWrap: With created, all you have to do is initialize it and load the document: pdfViewer // ...
const loadPDF = async (url) => {
const response = await fetch(url);
const blob = await response.blob();return pdfViewer.openPDFByFile(blob);
};
pdfViewer.init(viewerContainer);
loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf"); The above snippet fetches the PDF file as a and opens it in the viewer using its method. The PDF document used is a demo guide from the SDK’s included documentation. blob openPDFByFile() The additional space on the right will serve as a menu for draggable form fields. Creating Custom Form Fields All you need to create a form field with the Foxit SDK is a viewer, the form field’s metadata (such as field type or select options), and the form field position. For this example, you’ll create a set of predefined form fields with ready metadata that the user can drag and drop into the viewer. Defining Metadata Start by defining the metadata for allowed fields, as well as additional helpers: // ...
const menuContainer = document.getElementById("menu");
const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`;
const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type;
const formFields = [
{
label: "Push Button",
name: "push-button",
type: FieldTypes.PushButton,
width: 50,
height: 30,
},
{
label: "Checkbox",
name: "checkbox",
type: FieldTypes.CheckBox,
width: 50,height: 30,
},
{
label: "Radio Button",
name: "radio-button",
type: FieldTypes.RadioButton,
width: 80,
height: 30,
},
{
label: "Combo Box",
name: "combo-box",
type: FieldTypes.ComboBox,
width: 60,
height: 30,
},
{
label: "List Box",
name: "list-box",
type: FieldTypes.ListBox,
width: 60,
height: 100,
},
{
label: "Text",
name: "text",
type: FieldTypes.Text,
width: 60,
height: 30,
},
];
const comboBoxOptions = [
{ label: "10", value: "10", selected: true, defaultSelected: true },
{ label: "20", value: "20", selected: false, defaultSelected: false },
{ label: "30", value: "30", selected: false, defaultSelected: false },
{ label: "40", value: "40", selected: false, defaultSelected: false },
];
const listBoxOptions = comboBoxOptions; The function will generate IDs to identify form fields within the document. is a shortcut for faster reference of predefined field types available in the SDK. Each form field entry contains: randomId() FieldTypes A to inform the user about its use label A for matching dragged elements to the metadata entries name A to indicate the field’s type type A and for calculating the position rectangle within the PDF width height Lastly, comboBoxOptions and listBoxOptions contain sample options for fields that require users to select one. Creating Drag and Drop Elements With the metadata ready, you can create a function for handling the logic of drag and drop, as well as the form field placement: // ...
const loadFormFieldsMenu = async (PDFDoc) => {
const PDFForm = await PDFDoc.loadPDFForm();
formFields.forEach((formField) => {
const element = document.createElement("div");
element.draggable = true;
element.id = formField.name;
element.classList.add("menu-element");
element.textContent = formField.label;
element.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", event.target.id);
});
menuContainer.append(element);
});
}; The function accepts —an SDK object representing a PDF document—as an argument. It’s used to retrieve a object, which will be used to add and configure the form fields, after those fields are processed into draggable elements and added to the side menu. PDFDoc PDFForm Each element has a attribute set to to allow for dragging, as well as an corresponding to each form field’s unique name to match them with the underlying metadata. This is later used inside the event listener to transfer it during the drag and drop action. draggable true id id dragstart To get the parameter required for the function, you’ll have to get the resulting of the function by modifying it as below: PDFDoc loadFormFieldsMenu() promise loadPDF() // ...
loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then(
(PDFDoc) => {
loadFormFieldsMenu(PDFDoc);
}
); With the menu items created, the app now looks like this: Implementing Drag & Drop Functionality Having created the draggable elements, it’s time to fully implement the drag and drop functionality and allow for creating form fields in the viewer: // ...
const loadFormFieldsMenu = async (PDFDoc) => {
// ...
viewerContainer.addEventListener("dragover", (event) => {
event.preventDefault();
});
viewerContainer.addEventListener("drop", async (event) => {
event.preventDefault();
const droppedFormFieldName = event.dataTransfer.getData("text/plain");
const formField = formFields.find(
({ name }) => name === droppedFormFieldName
);
const pos = await pdfViewer.convertClientCoordToPDFCoord({
clientX: event.clientX,
clientY: event.clientY,
});
const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, {
left: pos.left - formField.width / 2,
right: pos.left + formField.width / 2,
top: pos.top + formField.height / 2,
bottom: pos.top - formField.height / 2,
});
const field = PDFForm.getField(id);
if (formField.type === FieldTypes.ComboBox) {
field.setOptions(comboBoxOptions);
} else if (formField.type === FieldTypes.ListBox) {
field.setOptions(listBoxOptions);
}
});
};
// ... In the above code, the event listener forwards the interaction to be handled in the event by calling . dragover drop preventDefault() Inside the event handler, the matching metadata is first retrieved using the dragged element’s data. Then, the mouse position from the event is transformed into PDF coordinates using the method available on the instance. drop convertClientCoordToPDFCoord() pdfViewer The position, metadata, and randomly generated ID are used in the method call from the object created earlier in the function. The method accepts the following arguments: addControl() PDFForm The index of the page to place the form field at (retrieved from call) convertClientCoordToPDFCoord() The randomly generated ID for the newly created form field The type of the form field according to provided constants (retrieved from metadata) The argument that defines the placement for the form field in the form of a rectangle, calculated using and to make the mouse coordinates the form field’s center width height Finally, in case the field accepts a list of options, it’s first accessed by the method of the object using the ID. The options are set accordingly using the method. getField() PDFForm setOptions() The final app, with a few form fields already placed, looks like this: Conclusion Adding functionality to your PDFs can indeed bring significant benefits to your organization and users. Electronic updates and signatures save time, money, and effort, while customized and secure documents enhance trust in your company. As demonstrated earlier, multilingual PDF tool, coupled with the Foxit PDF SDK for Web, provides a robust solution. You can create custom form fields, implement drag-and-drop functionality, and unlock a range of capabilities. However, this is just the tip of the iceberg. The Foxit PDF SDK for Web offers a comprehensive set of features for further enhancing your PDF functionality. Foxit’s To delve deeper into the possibilities, refer to the and additional resources provided by the SDK. The documentation will guide you through advanced features, customization options, and best practices. official documentation If you want to review the tutorial or check your work, you can refer to the associated with the tutorial. The repository likely contains the source code, examples, and additional materials to help you understand and implement the concepts covered in the tutorial. GitHub repository Also published . here

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

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Guide to Displaying Password Protected PDFs in a Web Application

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

A Guide to Displaying Password Protected PDFs in a Web Application

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps