'Angular : Save editable PDF data using angular/javascript?

Html:

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

Stuck at savedoc() functionality.

Typescript:

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

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

I am able to view and write in pdf editable fields (as input or checkboxes) but I can't figure out once filled all details, how to save/access that edited PDF content (mostly in blob format) to send back to server when click on save button. I have also tried ng2-pdf-viewer library of npm but same issue. I have to send this edited pdf to server in blob format to replace with existing.

How can I access edited pdf content?

Edited: Alternative approach, if its possible to trigger saveAs event from code to save iFrame pdf in local drive? I am using Window.showSaveFilePicker();but saved file seem corrupted or not exist.



Solution 1:[1]

Have a look at PDF-LIB.

It is a great JavaScript library which provides all sorts of tools to manipulate PDF documents. There is even tooling for filling the fields and saving the newly filled PDF.

In a past project, I used this library to capture user information from an HTML form and have it inserted and saved into a PDF.

Note: Remember that once you have the filled PDF on client side, you must send it back to server side to update the PDF that is stored on the server.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hedgybeats