serviceUrl Error

I am trying to use PDFViewer component with your sample code from here:
https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs/blob/master/app/page.tsx

I am getting error messages depending on  serviceUrl, I saw different 2 serviceUrl on your samples and documentations and I tested both of them but still error on there.

serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"

serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"


Error Message is :

Web-service is not listening. PDF Viewer depends

on web-service for all it's features. Please start the

web service to continue.


Error Message is :

Invalid PDF file type or PDF file not found. Please

select a valid PDF file


current code is :

'use client'
import  { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, Inject} from '@syncfusion/ej2-react-pdfviewer';
export function App() {


 

return (<div>
    <div className='control-section'>
    <PdfViewerComponent
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"
    //serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
    //resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"

    style={{ height: '640px' }}>
         <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                             ThumbnailView, Print, TextSelection, TextSearch,  FormFields ]} />
  </PdfViewerComponent>
    </div>
</div>);
}

export default App;


how can I solve the problem ?

Best regards,


Attachment: syncfusion_nextjs_pdfviewer_error_3df49943.rar

1 Reply

PA Priyadharshini Annamalai Syncfusion Team January 21, 2025 12:40 PM UTC

Hi


In the provided code snippet, we can see that the online service URL is used, which was created for demonstration purposes. If you want to test locally, you can set up your own service URL. Please refer to the documentation below to create the local service on your end. 

create-pdfviewer-service-core  

Alternatively, if you don't require the service, the PDF Viewer will function in standalone mode without any dependency on the service. We provide a Standalone PDF Viewer component that renders PDFs entirely on the client side, eliminating the need for any server-side service to display the PDF. For your reference, we have provided the documentation on the Standalone PDF Viewer below. 

 Standalone PDF Viewer Documentation  


Regards,

Priyadharshini


Loader.
Up arrow icon