create a PDF document that contains interactive input fields which can be modified using Angular

My goal is to generate an editable PDF using JavaScript and AngularJS, allowing users to input data into text fields on the document. However, when I download the PDF, the text fields are not editable. Here is a snippet of the code:

var opt = {
    margin: 0,
    filename: name+'doc.pdf',
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
    pagesplit: true
};
html2pdf().set(opt).from(element).save();

I found a similar snippet online in PHP that seems like it could achieve what I'm looking for, but I'm unsure how to convert it to JavaScript/Angular and test the code:

$html2pdf = new HTML2PDF('P','A4', 'en', false, 'ISO-8859-15');
$html2pdf->pdf->SetDisplayMode('fullpage');
$html2pdf->writeHTML($content, isset($_GET['vuehtml']));
$html2pdf->Output('pdf_demo.pdf'); 

Here is the library I am currently using:

<script src="/static/pdf/html2pdf.bundle.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

Can anyone guide me on how to create a PDF with editable text fields?

Answer №1

It seems like the current solution you're using is utilizing this particular library (it would have been helpful to know this earlier). According to my understanding of the documentation, this library first converts HTML to an image and then transforms that image into a PDF. Therefore, it's unlikely that the resulting PDF will be fillable.

If you require a fillable PDF, you might need to explore server-side options with a library such as wkhtmltopdf, which seems to have support for generating fillable PDFs. Alternatively, you could consider creating the PDF directly (without involving HTML) using jsPDF.

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

"Implementing a dynamic loading effect in Highcharts triggered by a button

Take a look at this sample highchart fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/ $('#button').click(function () { var chart = $('#containe ...

Personalizing the React Bootstrap date picker

I am currently working on customizing the react-bootstrap-daterangepicker to achieve a specific look: My goal is to have distinct background colors for when dates are selected within a range and when the user is hovering over dates to make a selection. I ...

Is using the new Date function as a key prop in React a good

In my React code, I have been using new Date().getTime() as key props for some Input components. This may not be the best practice as keys should ideally be stable. However, I am curious to know why this approach is causing issues and why using Math.random ...

What are some key indicators in the source code that differentiate TypeScript from JavaScript?

Reviewing some code on Github, I am looking for ways to quickly determine whether the script is written in JavaScript or TypeScript. Are there any simple tips or hints that can help with this? For instance, when examining an array declaration like the on ...

Use JavaScript to upload a JSON file containing arrays into separate tabs

Looking for help with incorporating JSON data into an HTML template that features tabs and a gallery? Take a look at my setup below: <div class="tab"> <button class="tabLinks" onclick="openDiv(event, 'overview'); appendData()" id= ...

Leveraging Directives for Enhanced Leaflet Marker Functionality

Currently, I am conducting experiments involving AngularJS and Leaflet (I am still in the learning process with both). As part of this experimentation, I have noticed that I can define some HTML as a parameter in markers.bindPopup(...);. Has anyone attem ...

The proxy encountered a TypeError when the trap for the property 'set' returned a falsish value

After migrating my code from using es5 class prototype representation to es6 class representation, I encountered an error. This is the comparison of the code before and after migration: ES5 syntax function RoutingScreen (context) { Object.assign(this, ...

The dot notation in JSON syntax allows for easy access

Recently, I've been struggling with referencing a variable in JSON dot notation within my meteor application. It seems that when trying to access respJson.userlower.name, userlower is not being recognized as a valid variable. Is there a workaround for ...

What is the best way to eliminate YouTube branding from a video embedded in a website?

I am currently utilizing an <iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> This setup removes the "YouTube" logo from the ...

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

Using JavaScript to dynamically add items from a menu and include a delete button for the option to remove them

//I am embarking on an exciting AJAX lab where I will be experimenting with dynamic element creation and deletion. Below is a snippet of the code to get started. //Generate elements and text nodes along with a deletion button for each item in the cart fu ...

The feature for favoriting or unfavorite a post is currently not functioning correctly on the frontend (react) side

I have been working on a social media website project for practice, and I successfully implemented the liking and disliking posts feature. However, I encountered an issue where when I like a post and the icon changes to a filled icon, upon refreshing the p ...

Leverage the OpenWeather Icons to Pinpoint Locations on a Leaflet Map

Having some trouble incorporating weather icons from an openweather API call as markers on my leaflet map. The icons should appear in a popup on the marker within an img tag. However, despite confirming the correct icon URL through console.log, they only ...

Can Selenium successfully scrape data from this website?

I am currently attempting to extract Hate Symbol data (including the name, symbol type, description, ideology, location, and images) from the GPAHE website using Selenium. As one of my initial steps, I am trying to set the input_element to the XPATH of the ...

Is there a way to verify if an email is already registered within a MERN stack application

I am in the process of creating a registration form and need to verify if an email already exists within the system. Below is the React code snippet showcasing the structure for better understanding. In the schema, emails are defined as unique. AuthContr ...

Issue with Selenium webdriver functionality in Electron development build

I've been working on an Electron project where I render an HTML page with a button that, when clicked, triggers a Node.js script (via IPC) using Selenium to scrape webpages. Here is the structure of my project: -app/ --index.html --ma ...

create a recurring design wallpaper within the TinyMCE editor

One of my functions alters the background of the tinymce editor. However, I am interested in having a wallpaper repeat in a similar fashion to background-repeat: repeat; in CSS. How can I achieve this? Here is the function: function SettinymceImage(bg_i ...

Angular $resource encounters a 400 Bad Request error when attempting a PUT request, triggering the $resolve and $promise

My service is structured as follows (with variables removed): angular .module('app') .factory('Employee', function($resource) { return $resource("https://api.mongolab.com/api/1/databases/:dbName/collections/:collectionN ...

JavaScript is unresponsive and fails to display

I attempted to incorporate my initial Javascript snippet into a browser to observe its functionality. However, upon adding these lines directly into the body of my HTML code (even though I am aware that there are more efficient methods), no visible changes ...

The functionality of CKEDITOR.tools.getindex has not been found

I'm currently in the process of updating my CKEDITOR version from 4.4.1 to 4.5.1. In order to do this, I am uploading my build-config.js file to ensure that I have all the same plugins as before with the latest CKEDITOR version. The issue arises when ...