How to add a signature image over a fillable pdf using pdf.js library without making pdf non editable

23 views Asked by At

Currently, in our vue.js application, we are using Pdf.js library to render pdf or another type of documents/images. When we add a signature over a fillable pdf document. It makes the PDF noneditable. We are adding the signature as an image over the pdf. the signature is in base 64 format

Below is the code of what we are doing when we get the signature data from the backend

const img = new Image()
  img.src = `data:image/gif;base64, ${signatureImage}`
  PDFViewerApplication.pdfViewer.submode = 13
  PDFViewerApplication.pdfViewer.addSignatureGif = signatureImage
  PDFViewerApplication.eventBus.dispatch('switchannotationeditormode', {
    source: PDFViewerApplication.toolbar,
    mode: 3,
    isFromKeyboard: false,
  })

The signature is coming over ther pdf and it is still editable. The problem comes when we save it to the database and then show it again next time. The code we are using for saving the signatue along with pdf

const { PDFViewerApplication } = this.$refs.iFrame.contentWindow

  const data = await PDFViewerApplication.pdfDocument.saveDocument()
  const blob = new Blob([data], { type: 'application/pdf' })
  const base64 = await blobToBase64(blob)

 

We are sending base64 to the database and when we retrieve it next time we first convert this to unit8array, Below is the code of what are are doing to display it

const { PDFViewerApplication } = this.$refs.iFrame.contentWindow
await PDFViewerApplication.open({ data: base64ToUint8Array(finalPDF) })
this.iWindow = this.$refs.iFrame.contentWindow

Does i am doing something wrong? I want signature to be added over pdf but if a pdf is editable, it should remain editable.

If anyone face similar problem, can they share there appproach?

0

There are 0 answers