How to integrate pdfviewer to preview pdf files on the file explorer component

[Rafik]

Hello ,  i hope u could help 

i am using the file explorer component  . it works great , but is their way to preview files rather then images . 

like integration of pdf viewer on the component ?

Thank u 

[Sowmiya Padmanaban]

Hi Rafik,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with FileManager component. Yes, you can able to view the pdf files in PDF viewer component. For your reference, we have prepared a sample to open the following extension file (pdf, docx, xlsx, txt) using PDF Viewer, DocumentEditor and SpreadSheet component. 

 

Refer the below code snippet. 

 fileOpen(args) { 

        let fileName: string = args.fileDetails.name; 

        let filePath: string = args.fileDetails.filterPath.replace(/\\/g, "/") + fileName; 

        let fileType: string = args.fileDetails.type; 

        if (fileType == ".docx" || fileType == ".txt" || fileType == ".html" || fileType == ".rtf" || fileType == ".xml") { 

            this.showDocViewer(fileName); 

            this.getFileStream(filePath, false) 

        } 

        else if (fileType == ".pdf") { 

            this.showPDFViewer(fileName); 

            this.getFileStream(filePath, true); 

        } 

        else if (fileType == ".xlsx") { 

            this.showExcelViewer(fileName); 

            this.getBlob(fileName, filePath) 

        } 

    } 

 

Refer the below sample and service link: 

 

Sample link: https://stackblitz.com/edit/angular-gt7pgw-q71eeq?file=app.component.ts 

 

Service link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-Service-95435461_(2)-1374274695.zip 

 

Note: After running the FileManager service, files are loaded in FileManager component. 

 

Refer the below link to know more about the FileManager component. 

 

UG Documentation-https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/ 

 

Demo link-https://ej2.syncfusion.com/angular/demos/#/material/file-manager/overview 

 

API reference-https://ej2.syncfusion.com/angular/documentation/api/file-manager/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Tom McEwen]

I have downloaded the Stackblitz file and unzipped it then npm update/ngbuild and get The "favicon.ico asset path must start with the project source root." and the build fails. The Stackblitz app itself works great. Any suggestions would be appreciated.

[Sowmiya Padmanaban]

Hi Tom McEwen,  

 

Based on your requirement , we have prepared a local angular application using FileManager component for reference. Please, refer to the sample and service links below. 

 

Sample link:  https://www.syncfusion.com/downloads/support/forum/154689/ze/FileManager-635275105.zip 

 

Service link: https://www.syncfusion.com/downloads/support/forum/154689/ze/Sample-Service1202844445.zip 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Tom McEwen]

This is a follow-on question to your reply of January 8, 2021.

I downloaded both those sample links (FileManager-635275105.zip and Sample-Service1202844445.zip) that you provided, and they work just fine together, so I am integrating them into my own project, and have come across one thing that might just be an issue that I don't understand.

In the Angular client example a couple of times the example would fail to load the PDF file with the message "Client-side error is found. Please check the custom headers provided in the AjaxRequestSettings property and web action methods in the ServerActionSettings property." I finally narrowed it down to the url pointed to at line 71 of the app.component.ts file, being down at the time.

This led me to wonder why this "service" is required to be set to that url of "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer", since that is not where the pdf is being loaded from, which is from the Sample Service that was provided in the second download of "Sample-Service1202844445.zip".

I tried clicking the "service" pdfviewer url mentioned above and simply get a basic test page back with "value1" and "value2".

So I tried changing that "service" to something different, including the url for the runnin Sample API Service, but none of these will work.

So my question is, does that "service" need to be pointed to the ej2services... site for some reason, and if so what do we do if that site is down?

And thanks again for your excellent help!

Tom

[Vasugi Sivajothi]

Hi Tom, 

 

Thanks for your update. 

 

Our PDF Viewer control is both server and client-side oriented. PDF viewer control processes the PDF document on the server-side and sends the processed PDF data to the client using the web service to render the PDF document and for further operations in PDF viewer.   

   

So we need to create the own web service and add the web service URL in the serviceUrl property of our client-side for further processing in the PDF document.    

Please refer to the below link to create the web service, 

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

Note: The service URL ('https://ej2services.syncfusion.com/production/web-services/api/pdfviewer') is only for demo purpose. We need to create the own web service and run the same and refer the localhost link in the serviceUrl property of our PDF Viewer control. 

 

 

Regards, 

Vasugi 

[Tom McEwen]

That is exactly what I have done. I used the service provided in your "Sample-Service1202844445.zip" and have it running, and as mentioned in my request, that API service is what I am trying to use in my serviceURL instead of the demo Syncfusion production service.

I know the API service URL is working because the pdf is getting loaded from there, and NOT from the "service" demo production URL.

So the URL as provided in your "Sample-Service1202844445.zip" works as long as the "service" URL (line 71 of app component.ts), points to your demo production service, while the URL at line 77 + line 179 = "http://localhost:62869/api/FileManager/GetDocument" is the one used to actually retrieve the PDF from the service.

i.e. This example only works with both the URLs pointing to 2 different places.

[Vasugi Sivajothi]

Hi Tom, 

 

Thanks for the update. 

 

We have modified the provided file manager web service sample with PDF Viewer service based on your requirement. Please refer to the modified sample from the below link, 

 

Web Service sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManager_and_PDFViewer_Controller-85011389 

 

Angular Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular_9_list1146057495 

 

 

Please let us know if you have any concerns on this. 

 

 

Note: Launch the sample web service and replace the same ServiceURL in angular sample. 

 

 

Regards, 

Vasugi