Guide on making a PDF input field function like a regular input field with PDF.js

Whenever I encounter input fields in a pdf file, I attempt to use pdf js to interact with them. However, I have been facing challenges in doing so.

Allow me to provide an example of my objective:

const canvas = document.getElementById(`canvas-${this.pageNumber}`);

      const context = canvas.getContext("2d");
      const dis = this;
      this.fabricObj = fabric;

      const scale = this.scale;
      const viewport = page.getViewport(scale);
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var formFields = {};

      page.render({
          canvasContext: context,
          viewport
        })
        .promise.then(() => {})

I am curious if it is feasible to treat a pdf input field as a regular input field?

Answer №1

Generating a PDF from a canvas while also incorporating editable inputs is not easily achievable. However, you can explore the possibilities of rendering interactive forms and AcroForms for similar functionality. Refer to the AcroForms example and refer to the renderInteractiveForms flag in the pdf.js API documentation for more information.

For an example of AcroForms, visit: https://github.com/mozilla/pdf.js/tree/master/examples/acroforms

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving information from JSON files using AngularJS

Here is a JSON object example: [ { "user": "A220", "shorttext": "shanghai", "reportedBy": "S,A", "questions": " [{\"question\":\"Q1\",\"is_mand\":\"0\",\"type\":\"text\",\"a ...

Utilizing Jcrop on an image loaded via ajax

Recently, I've been working on a project that involves uploading profile pictures to a server and storing them in a database using Ajax. While the basic functionality is working fine, I wanted to enhance the user experience by allowing users to crop t ...

Is there a way to delay the closing of the browser until the server call is finished?

I am attempting to invoke a service that updates data upon browser close or tab close. The issue I am facing is that the service call uses $http and is asynchronous, so I believe that the browser unload event is cancelling the call and closing the browser. ...

Instructions for using arrow keys to navigate between div elementsHow to use arrow keys for navigating through

Is it possible to navigate between div elements using arrow keys like in Notion's editor? <div> hello word </div> <div>hi</div> <div>notion</div> Given the code above, how can one move the cursor to another ...

JS Month Interval Bug Causing Issues with Chart Date

This script retrieves and summarizes download data from MySQL by day, displaying it as a chart. However, there's an issue with the way dates are handled between PHP and JavaScript (Highcharts). While PHP outputs month values from 1 to 12, JavaScript c ...

Enhancing nested mongoose arrays by a particular value for updates

In my mongoose schema, I have an array that contains items and another array. var mongoose = require('mongoose'); var Schema = mongoose.Schema; var CompanySchema = new Schema({ dateCreated: { type: Date, default: Date.now }, ownerId: { typ ...

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

country code: "ab", "aa", "fr", ... I need to create a custom pipe that will convert a countryCode into a countryName, such as: "ab" → "Abkhazian", "ch" → "Chinese", "fr" ...

Removing a child element in ReactJS that was dynamically created based on a count

Currently, I'm working on a project with two React components: TrackSection (the parent element) and TrackItem (the child). The TrackSection contains a button that adds a new TrackItem every time it is clicked by incrementing the numTracks variable. W ...

What is the reason for Cypress choosing to omit specific commands?

The test below aims to scan and authenticate a QR code, then utilize the received authentication token. However, for some reason, the last two commands (.type) are not being executed. I've been stuck at this point for quite some time now. Any insights ...

Using placeholders with inputs in an Angular2 table generated by ngFor

I have an array public example = [['hallo', 'fruit', 'rose'], ['apple','book']] Currently, I am working on creating a table of inputs. The values in this table depend on the specific part that I am usin ...

Using Ajax with the submitHandler function in jQuery Validation Plugin

Currently, I'm working with the jQuery validation plugin in conjunction with ASP.NET MVC. I am trying to utilize $.Ajax() to submit a form, but I'm encountering an issue where the entire section of code I have written seems to be getting skipped ...

One way to send an array object parameter from a Vue website to a Google Apps Script in order to update a Google Spreadsheet column value

Initially, I develop a website using Vue where I pass parameters to my Google Apps Script. In the Vue function: var appurl = "my google appscript url" this.$http.get(appurl, { params: { settingLink: this.settingLink, albumLink: t ...

I am experiencing an issue where the custom form validation directive in AngularJS is not functioning properly within my modal

To enhance the validation of my input boxes, I created a custom directive called nx-validate. This directive is designed to be added to a bootstrap div.form-group, which will then check if the <input/> field is $dirty or $invalid, and apply the appro ...

Issue with Axios response processing

I need to upload a new document into a database using Axios in React. I have successfully implemented the functionality, but I also want to display a message in the console saying "New post has been inserted". This is my front end code: newTodo(todo){ ax ...

Issues with the .change(function() JavaScript in Internet Explorer versions less than 9

I'm experiencing issues with this script in Internet Explorer versions below 9. Can someone please help me identify what is wrong with my script? Thank you. IE7 and IE8 are showing the following error: SCRIPT87: Invalid argument. Found ...

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

I have encountered an issue that I need assistance with: <input title="1" type="text" class="email"> <input title="2" type="text" class="email"> <input title="3" type="text" class="email"> The HTML code above shows my attempt to extract ...

Why does the select element display the first item when it is bound to a model?

I'm facing an issue with a select element in Angular6. I have a situation where the options in the select are dynamically generated based on an array that undergoes changes through a pipe. When the selected value in the model is no longer present in t ...

Adding images to HTML using JavaScript below existing images

I'm currently working on a JavaScript game and I want to implement a feature where my character can move under blocks (isometric PNG images) instead of just sliding through them. Is there a way to dynamically adjust my character's position in the ...

Creating a multi-dimensional array using information from a database

I have a unique challenge where I am utilizing a template that generates a menu with a specific structure. In my database, I have various menus stored and I've successfully retrieved them. However, the issue arises when I need to figure out a way to d ...

Executing an event in Javascript or triggering with Jquery- the process of initiating an event once a value is sent to an input box by Javascript

How do you trigger an event when a JavaScript-passed value is entered into an input box? <!DOCTYPE html> <html> <body> <p>Type something in the text field to activate a function.</p> <input type="text" id="myInput" oninp ...