Need Pdftron integration code reactjs class component

Technical Support WebViewer
21

@Andrey
I have faced another issue, Actually, I have made some changes to an image file, and save it. Why the image format change to pdf? how I can get image file?

here is a code, I want image file not pdf in any case:


instance.setHeaderItems(header => {  header.push({ type: 'actionButton',
img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',

  onClick: () => {
            const doc = docViewer.getDocument();
             annotManager.exportAnnotations().then(xfdfString => { const options = {  xfdfString, };

                doc.getFileData(options).then(data => {
                 const arr = new Uint8Array(data);
                 const updateBlob = new Blob([arr], 
{ type: 'image/jpeg'//'application/pdf'
                  });

          const formData = new FormData();
           formData.append('file', updateBlob, `${fileName}`);
                                                        
//google drive update file API call here
                                                  

                                                }
                                            });
                                        });
22

Thank you for sharing the snippet.

We convert it to a PDF since we want to provide the same annotation experience on images as well. Images do not have annotation specification.

Potentially what you can do is export a high res image: https://www.pdftron.com/documentation/web/guides/create/thumbnail/#create-a-high-resolution-page-image-with-annotations. You can do png or jpeg and go as high quality as you want plus option to merge annots inside of image.

23

@Andrey, It would be better, Google drive related solution posted into docs area.

24

@Andrey, I have faced another issue, kindly find the attachment file.
normally PdfTron working fine. but if our screen in idle mode. in that case, I opened PdfTron but at that time error occur. kindly guide me, How I can fix it?

image
image1790×965 115 KB

25

What is the idle mode? Does the file location change?

26

Could you test whether this rewrite would work?

WebViewer(
    {
        path: 'lib',
    },
    viewerDiv.current as HTMLDivElement,
)
.then(instance => {
    instance.loadDocument(`https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`, { 
        filename: `${filename}`, 
        customHeaders: {
            Authorization: `Bearer ${token}`, 
            Accept: 'application/json'
        }
    });
});
27

@Andrey, idle mode if: Users have not interacted with it for a period.

28

Dear @Andrey, Still facing issue.

image
image1819×926 87.2 KB

29

Thanks for trying it out for me. I guess please go back to the way you were doing it.

Also: