Can I add new Custom Buttons that calls external functionality?

Technical Support
1

Hi Team,

I have a question which i need to know the best way to address, is it PDF.JS Express, or PDFTron ?

Our Requirements i to have A custom button that, upon clicking would call a web service to get a unique number, then placing the number along with a QR code on the PD, with a support to move it and resize it …

Thank you

2

Hi!

Yes this functionality should be possible with PDF.js Express.

You can see how to add custom buttons to the UI here

For the QR code, you would have to use a third party library to generate it, but once you have it generated you could add it as a stamp to the PDF:

Webviewer({
...
}, document.getElementById('viewer')).then(instance => {
  const { Annotations, annotManager } = instance;

  instance.docViewer.on('documentLoaded', async () => {
    var stampAnnot = new Annotations.StampAnnotation();
    stampAnnot.PageNumber = 1;
    stampAnnot.X = 200;
    stampAnnot.Y = 200;
    stampAnnot.Width = 300;
    stampAnnot.Height = 155;
    stampAnnot.Author = await annotManager.getCurrentUser();
    // Add base 64 QR code here
    stampAnnot.ImageData = 'data:image/png;base64,iVBO...'
    annotManager.addAnnotation(stampAnnot);
    annotManager.redrawAnnotation(stampAnnot);
  })
});

To save the QR code into the document, you can use our Merge annotations API.

If you run into a limitation with Express along the way or your requirements change, you can easily switch to PDFTron WebViewer (the APIs are the exact same). PDFTron WebViewer supports merging of annotations on the client, as well as a bunch more features.

I hope this helps!
Thanks,
Logan

3

following the same logic in some cases I have the need to insert a pdf over the other, the same was done with the qrcode this is possible

4

Hi there,

Are you looking to just add a screenshot of the PDF as an annotation?

5

I will explain it better, I have an architectural project, where my engineers will analyze the project, if it is accepted I have another pdf with some licensing information from the city hall, so I would like to go over this pdf with the information about the project pdf

image
image872×856 63 KB

6

Hey!

This should be doable by converting your PDF to an image and then stamping that image onto the PDF with a stamp annotation.

Here’s a code snippet to get you going

    const document = await instance.CoreControls.createDocument('https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf');
   
    const imageData = await new Promise(resolve => {
      document.loadCanvasAsync({
        pageNumber: 1,
        drawComplete: (canvas) => {
          const data = canvas.toDataURL();
          resolve(data);
        }
      })
    })

    const { width, height } = document.getPageInfo(1);

    const ratio = height / width;


    const stampAnnot = new Annotations.StampAnnotation();
    stampAnnot.PageNumber = 1;
    stampAnnot.X = 100;
    stampAnnot.Y = 250;
    stampAnnot.Width = 275;
    stampAnnot.Height = 275 * ratio;
    const keepAsSVG = false;
    stampAnnot.setImageData(imageData, keepAsSVG);
    stampAnnot.Author = annotManager.getCurrentUser();

    annotManager.addAnnotation(stampAnnot);
    annotManager.redrawAnnotation(stampAnnot);

You will just need to adjust the document you are loading for the stamp, and also the size and coordinates to your liking. Note that you can pass a blob to createDocument instead of a URL if you want.

Thanks!
Logan

8

it worked perfectly, but I have a problem after I inserted it, I can’t delete it anymore, there are some parameters to set to be allowed to delete with the eraser

9

Hey there,

It should be deletable via the eraser, I have no problem removing the stamp with the eraser tool.

eraser
eraser934×760 3.18 MB