How can I preserve data in editable PDFs with Angular and JavaScript?

Need help with savedoc() functionality

  <iframe [src] ="fileurl" #iframe>
     </iframe>
     <button (click)="saveDoc()">
     </button>

Having trouble accessing edited PDF content in Typescript:

    /*api call to get document blob data on load*/
     var fileurl = new blob([res.body],{type:application/pdf});
     fileurl = URL.createObjectUrl(fileurl);

    savedoc(){//need logic to access edited pdf content as blob}

I can view and write in editable fields, but unsure how to save/access the edited PDF content in blob format to send back to server. Tried using ng2-pdf-viewer library with no success. Need to replace existing PDF on server.

How do I access edited PDF content?

Considering triggering saveAs event from code to save iFrame PDF locally. Using Window.showSaveFilePicker();but saved file appears corrupted or missing.

javascriptangulartypescriptpdf-viewer

Answer №1

Check out the amazing capabilities of PDF-LIB.

This JavaScript library offers a wide range of tools for PDF document manipulation, including features for filling fields and saving edited PDFs.

I once utilized this library in a previous project to extract user data from an HTML form and populate it into a PDF for storage.

Please keep in mind: Once you have made changes to the PDF on the client side, remember to send it back to the server side to update the original stored PDF.

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

What is the term for specifying a variable's data type using a set of values instead of a traditional type?

Recently, I stumbled upon some code that introduces a class with specific variables defined in an unconventional manner. export class Foo { id: string = "A regular string" bar: '>' | '<' | '=' | '<=' | ...

typescript

Is there a way to programmatically update the content of a React Bootstrap modal?

I have been attempting to modify the content of a modal after it has been loaded, but I am struggling to identify the correct nodes for modification. I have added references to the nodes I want to change and attempted to alter them in componentDidMount(). ...

javascriptreactjsreact-bootstrap

Issue encountered with ngRoute dependency injection, despite successful loading of angular-route.js.min file

I'm struggling to understand why the module isn't loading properly with ngRoute. Even though I have included angular and angular-route scripts from a CDN, I keep encountering the error Error: $injector:modulerr Module Error <!--Angular--&g ...

javascriptangularjs

Upon selection, the first parameter is detected as undefined

I am dealing with a dropdown button that has an event handler: onSelect={this.handleSelect.bind(this)}> However, the first parameter I receive is undefined and the second parameter is a Proxy object with information about the event. I am confused as t ...

reactjstypescript

Angular 2 presents a challenge with two-way binding in dropdowns with IE 9/10

Encountering a peculiar issue on IE 9/10 - two-way binding seems to work for all HTML elements except dropdowns. Even if the value exists in the dropdown, it does not get selected. Below is a snippet of the code: HTML <select [(ngModel)]="model.city" ...

angularhtmlinternet-explorerangular-template

Determine the value added tax in your online shopping basket

Currently, I am in the process of developing a webshop for a pizzeria using Angular, and recently completed work on my cart component. One of the key features I wanted to incorporate was adding a 10% Value-Added Tax (VAT) for each item in the cart and incl ...

angulartypescript

Addressing the issue of empty ngRepeat loops

Utilizing ngRepeat to generate table rows: <tr ng-repeat="User in ReportModel.report" on-finish-render> <td><span>{{User.name}}</span></td> </tr> An on-finish-render directive triggers an event upon completion of t ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Connecting different jQuery methods to create a chain

From my understanding of jQuery chaining, the first method in the list must complete before the next method executes. Here is an example: $.fn.reportZebraStriper = function(options) { console.log('reportZebraStriper()'); return true; } ...

javascriptjquerymethodschaining

Having trouble iterating over an array in Angular's TypeScript

I've been attempting to loop through an array of objects in TypeScript, but encountered the following error: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'forEach' of undefined TypeError: Cannot read property 'fo ...

angulartypescript

Learn how to retrieve data prior to rendering with Vue 3 and the composition api

Is there a way to fetch data from an API and populate my store (such as user info) before the entire page and components load? I have been struggling to find a solution. I recently came across the beforeRouteEnter method that can be used with the options ...

javascriptvue.jsfrontendvue-routervue-composition-api

Assign a CSS class to a DIV depending on the vertical position of the cursor

The website I am currently developing is located at Within the site, there is a collection of project titles. When hovering over a project title, the featured image is displayed directly below it. I would like to change the positioning of these images to ...

javascriptjquerycss

"Enhancing User Experience: Harnessing the Power of jQuery Load and jQuery Tabs for Seamless

Currently, I am working with jQuery Tabs and implementing the loading of tab pages through the tabsbeforeactivate event in order to utilize Ajax and only load contents when necessary. However, I am encountering challenges as I have to manually activate Un ...

javascriptjqueryajaxunobtrusive

Leveraging Environment Variables in Separate JavaScript Files within a Node Express Application

After trying various methods and searching extensively online, I am struggling to use environment variables in a separate JavaScript file within an Express App. My Setup: In my Express app, I have an index.js file that serves an HTML page with associated ...

javascriptnode.jsexpressenvironment-variables

Monitoring user clicks using JavaScript code implemented

Currently, I am utilizing a JavaScript file to load on certain pages in order to track various events. Within this JavaScript file, there is a collection of selectors that have listeners attached to them. When these selectors are clicked, the tracking AP ...

javascripthtml

Asynchronous handling of Three.JS geometry operations

I've been developing a browser-based game that retrieves terrain data from a remote server. My current implementation involves creating a PlaneGeometry with 100x100 segments based on the received data. However, when the terrain is added to the game ...

javascriptasynchronousthree.js

Using either Javascript or JQuery to update every cell in a particular column of a table

I need to use a button to add "OK" in the Status column of table tblItem, which is initially empty. How can I achieve this using JavaScript or JQuery? The table has an id of tblItem Id Item Price Status 1 A 15 2 B 20 3 C ...

javascriptjqueryhtml

What is the method to designate the initial value of a <select> tag within a React component?

I am working with a basic <select> element that is looping through a set of options: <select onChange={(event) => this.setState({selectedOption: event.target.value }) }> { this.state.options.map(option => <option key={option.label} ...

javascriptreactjsfrontend

Loading necessary CSS when needed in React JS

I am currently in the process of converting a bootstrap template to react framework. My question is, is there a way for me to load stylesheets on demand? For instance, if I have 2 components and I import the same stylesheet separately in both components, ...

javascriptcssreactjs

Issue with the rendering of the Google Font "Playfair Display" involving the letters "ff" being displayed incorrectly

There seems to be a problem with the Google Font "Playfair Display" when two consecutive "f" characters are used. Check out this example of the odd rendering issue My idea for a fix involves creating a JavaScript function that scans all text on the websi ...

javascriptdebuggingfont-face

Why does a Vue component throw errors prior to being rendered?

In the Home view, there are two components: Filter and Results. The Results component relies heavily on data from the vuex store, which is influenced by the Filter component. Once the filters are applied and the user interacts with Filter, the necessary da ...

javascriptvue.jserror-handlingvuex