Need Pdftron integration code reactjs class component

Hey,

I hope you are doing great. I have read your tool documentation, I understand also. I have 2 questions regarding the code.

  • Needed class component react js code. in your docs functional component code available. It would be easy for me if you provide me code that is compatible with the class component.
  • Another thing is that Actually I am using React js with dot net. I haven’t a public folder in our code. and in a demo, you guys explained about the public folder which is used to store some pdf Tron files.

kindly guide me I am a bit confused. How I can configure it in our existing application

Thanks, Best Regards

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hi,

Which tool documentation were you looking at?
And as for the React question, which guide were you looking at? Could you send me the link? Also, you can take a look at this sample project for WebViewer with React.

Thanks.

Wanbo

Dear,

I am looking this one: https://www.pdftron.com/documentation/web/get-started/react/

Hi,

I just found this guide about using public folder in React. Please take a look and hope it’s useful. Thanks.

Wanbo

dear, actually I don’t want create a public folder on our react end, actually our file structure is defferent.

we use webpack to compile react js code into js.

And kindly also guide me regarding class component, your docs provide function base support.

Hi,

The React function component and class component can be converted into each other most of the time. Which specific Tool documentation are you having question about?

@Andrey Could you help take a look at the question regarding React project set up? Thanks!

Wanbo



kindly check the snap., actually we aren’t using the public folder and how we can access lib and file, and kindly guide me regarding the class component, in reactjs

refference : https://www.pdftron.com/documentation/web/get-started/react/

I can take a look, @BossRizwan how are you serving static resources images/logos, etc in your project?

Also, give your class component code you want to place WebViewer in, and I will fill it out where WebViewer code should be placed.

viewerDiv = React.createRef<HTMLDivElement>();

componentDidMount() {
        console.log('viewerDiv :: ',this.viewerDiv)

        WebViewer(
            {
                //path: 'PdftronLib',
                path: '../../Common/lib',
                initialDoc: '',
            },
            this.viewerDiv.current as HTMLDivElement,
        )
            .then((instance) => {
                console.log('here');
            });

    }

//modal

<Modal centered={true} isOpen={this.state.isPdftronShow} className="modal-dialog bh--modal modal-dialog-centered" >
                                <div className="modal-header"> 
                                    <button
                                        type="button"
                                        className="close bh--close"
                                        onClick={() => this.setState({ isPdftronShow: false })}
                                        aria-label="Close"
                                    >
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>

                                <ModalBody>
                                    <div className="row justify-content-center align-self-center">
                                           <div className="App">
      <div className="webviewer" ref={this.viewerDiv} style={{ width: '100%', height: '100%' }}></div>
    </div>
                                    </div>
                                </ModalBody>
                            </Modal>

@Andrey, kindly check the above code, I have shared.

@BossRizwan looks correct for the most part, you can cross-check our repo sample before we updated it to hooksmhttps://github.com/PDFTron/webviewer-react-sample/blob/92edf49ca363c8d508c69aa11235a0def4a26872/src/App.js

let me check it.

Dear @Andrey , Can we access the file from google drive ?

Yes, you should be able to. WebViewer can handle file opening from multiple sources: https://www.pdftron.com/documentation/web/guides/basics/open/url/.

You might need to pass an additional auth-token: https://www.pdftron.com/documentation/web/guides/basics/open/url/#additional-options.

Let me know if that works and what did you have to do.

Dear @Andrey, Actually we have these types of google drive URLs. and want to open these file into pdf Tron then do some changes and save it, after saved the annotation, the google drive file auto-updated.

Is it’s possible? if yes, kindly send me some references and help material for it.

kindly check the below files also

File No# 1. testimage.jpg - Google Drive

File No# 2. Muhammad's Resume.pdf - Google Drive

Thanks, this kind of falls out of our domain expertise, but I found this guide that will be helpful: Download files  |  Google Drive API  |  Google Developers. You can get the stream/blob/file and then pass it to WebViewer.

I will look into it as well.

Thanks alots @Andrey, its working fine.

Awesome, it would be great if you could share the snippet, ofc, please remove any API keys or tokens. This would help the community.

@Andrey why not, 

fetch(`https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`,
                            {
                                method: 'GET',
                                headers: { 'Authorization': `Bearer ${token}`, 'Accept': 'application/json' },

                            }).then(res => res.blob()).then(blob => {

                                WebViewer(
                                    {
                                        path: 'lib',
                                        //initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
                                    },
                                    viewerDiv.current as HTMLDivElement,
                                )
                                    .then(instance => {
                                        instance.loadDocument(blob, { filename: `${filename}`});
                         
                                        instance.enableElements(['leftPanel', 'leftPanelButton']);
                                        const { docViewer } = instance;
                                        const annotManager = docViewer.getAnnotationManager();

                                                }
                                            });
                                        });

                                    });
1 Like