React PDF Viewer

[Feroz]

Hi,

May I know how to load the PDF from my local drive in react pdf viewer.

I tried this code with the document path its not working. it's not loading from my local drive. can you please help?

return <PdfViewerComponent id="container" documentPath="file:///E://High School Math.pdf" serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer" style={{ 'height': '640px' }}>

                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch]}/>

            </PdfViewerComponent>;

}

[Akshaya Arivoli]

Hi Feroz, 

Thank you for contacting Syncfusion support. 

We can create the PDF Viewer web service project and then we can provide the document location in GetDocumentPath() of  PdfViewerController.cs .Please refer to the below link to create PDF Viewer web service project. 

https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version  

Please try it and revert us with more details about your requirement and the use case, if you need further assistance.  

Regards, 

Akshaya 

[Feroz]

Hi Akshaya,

Thanks for replying back.

I’m not sure how it got changed to .NET project, Im trying to implement in React JS app.Can you provide me how to embed local pdf path in React JS application.

[Mohan Selvaraj]

Hi Feroz,  

 

Syncfusion PDF Viewer control is client and server based. So we can only load the PDF file which is available in the server location. For example: If the document path is like “E://viewer.pdf” and the local web service has been used then the PDF document will be rendered correctly in PDF Viewer control. But when the web-service is hosted in the IIS or Azure then it will check the E:// in the hosted environment not in the local machine. So the PDF document has to be placed in the server location for loading the PDF file from the path or we can load the PDF document as base64 string in the load() method of our PDF Viewer control. In the previous provided code-snippet the document path is provided as “E://document.pdf” but the serviceUrl used is our demo application url("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer). So they will search the E://docuemnt name in the hosted service environment. So only the PDF document is not rendered in our PDF Viewer control. 

Regards, 

Mohan S