How to download editable pdf with updated values using ng2-pdf-viewer?

144 Views Asked by At

I used ng2-pdf-viewer npm to display pdf. In that pdf I can edit input tag values. When I download that pdf file I get an editable pdf but values are not updated.

And when I convert html to pdf and then download pdf that time I get updated values but pdf is not editable.

Can anyone help me out with this?

On file select I set the value in the src tag

function onFileSelected(event: any) {
    let $img: any = document.querySelector('#file');
    if (typeof FileReader !== 'undefined') {
      let reader = new FileReader();
      reader.onload = (e: any) => {
        this.src = e.target.result;
      };
      reader.readAsArrayBuffer($img.files[0]);
    }
  }

after load complete of file I update my input tag value

function afterLoadComplete(pdf: any) {
    debugger
    this.pdfs=pdf;
    console.log('after-load-complete');
    for (let i = 1; i <= pdf.numPages; i++) {
      // track the current page
      pdf.getPage(i).then((p: any) => {
        debugger
        return p.getAnnotations();
      })
        .then((ann: any) => {
          debugger
          const annotations = (<any>ann) as any[];
          annotations.filter(a => a.subtype === 'Widget')
            .forEach(a => {
              if (a.id == "36R")
                a.fieldValue = "manish";
              debugger
              // this._createInput(a);
            });
        });
    }
  }

When I download pdf I got editable pdf but values are not updated

function downloads() {
    this.pdfs.getData().then((u8: any) => {
      debugger
      let blob = new Blob([u8.buffer], {
        type: 'application/pdf'
      });
      let url = URL.createObjectURL(blob);
      this.openLink(url);
      setTimeout(function () {
        window.URL.revokeObjectURL(url);
      }, 5000);
    });
  }

private openLink(url: string) {
    debugger
    let a = document.createElement('a');
    document.body.appendChild(a);
    a.href = url;
    a.download = 'Certificate.pdf';
    a.click();
  }
0

There are 0 best solutions below