Pre-fetch and cache pdf files in client

Question

Hi support,Q1. Do you offer a mode to pre-fetch a lot of documents (maybe then save to local storage) before displaying the pdf viewer control to ensure the loading process is smooth.Currently in the client mode using SfPdfViewer and we have to setup the service in the server like https://ej2services.syncfusion.com/production/web-services/api/pdfviewer which may cause performance issues when we have a lot of documents.Q2. Is is possible to save the annotation into multiple layers. For example, annotations of user A should be marked as layer1 and annotations of user B should be marked as layer2. Therefore, user B cannot edit annotations in layer1, he can only edit annotation of layer2.Thanks and Regards,Tam

Vasugi Sivajothi · Accepted Answer

Hi Tam,

Thank you for contacting Syncfusion support.

Please find the details.

Query

Details

Q1. Do you offer a mode to pre-fetch a lot of documents (maybe then save to local storage) before displaying the pdf viewer control to ensure the loading process is smooth.

We have internally stored the document information in the cache before loading documents in the PDF Viewer. After that, we can access the document data from the cache.

Currently in the client mode using SfPdfViewer and we have to setup the service in the server like https://ej2services.syncfusion.com/production/web-services/api/pdfviewer which may cause performance issues when we have a lot of documents.

Syncfusion 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, if we use the online demo url, performance issues occur due to some network problem.

We need to create the own web service and provide that URL to the serviceUrl property of our client-side project for further processing in the PDF document.

Please refer to the below link to create PDF Viewer web service project,

https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core

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

We have shared the simple sample. Please refer to the below sample and documentation link,

Client-side Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WEBBLA~11909442453

Web Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WEBSER~1-1011189861

Documentation Link: https://blazor.syncfusion.com/documentation/pdfviewer/getting-started/client-side-application/

Q2. Is is possible to save the annotation into multiple layers. For example, annotations of user A should be marked as layer1 and annotations of user B should be marked as layer2. Therefore, user B cannot edit annotations in layer1, he can only edit annotation of layer2.

There is no option to define any layers based on users. But you can lock the annotations in the PDF Viewer using the isLock property. Please refer to the below code snippet and sample,

Code Snippet:

<SfButton OnClick="@OnClick">Lock Annotation</SfButton>

public async void OnClick(MouseEventArgs args)

{

var allAnnots = await PDFViewer.GetAnnotations();

foreach (var item in allAnnots)

{

item.AnnotationSettings.IsLock = true;

PDFViewer.EditAnnotation(item);

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WEBBLA~11909442453

Regards,

Vasugi.

Tam Vu · Answer

Hi Vasugi,Thank you for your answer. I understand how the PDF control work now. In addition, I see that the SfPdfViewerServer  is highly recommended over the SfPdfViewer  at here: https://blazor.syncfusion.com/documentation/pdfviewer/getting-started/features. Can you explain a bit about this difference? I tried the client-side control with .NET 5 when using annotations tool like drawing a circle and it takes a long response time. I've attached the code here, can you please have a look?ThanksTamAttachment: SyncfusionPdfViewerWasmDemo_.NET_5.0_68f10b12.zip

Vo Huu Phuoc · Answer

Hi Vasugi Sivajothi,Using SfPdfView in Blazor Wasm really have performance issues when using animation, drawing,.... compare to server control. (Fast & smoothly)As document highly recommend to use the server control, but my project using Wasm and want to buy Syncfusion license, do we have any plan to upgrade client control to work smoothly or any solution for it ?This impact alot on my PoC solution that should choose Syncfusion or not since i'm using Blazor WebAssembly.ThanksPhuoc

Vasugi Sivajothi · Answer

Hi Tam,

Thank you for your update.

Please find the details.

Query

Details

Thank you for your answer. I understand how the PDF control work now. In addition, I see that the SfPdfViewerServer is highly recommended over the SfPdfViewer at here: https://blazor.syncfusion.com/documentation/pdfviewer/getting-started/features.

Can you explain a bit about this difference?

SfPdfViewer is client and server-side oriented. We need to provide the service URL property in the SfPdfViewer tag. If we perform the actions in the client-side, it will send a request with JSON object details to the server-side and returns the processed PDF data to the client using the web service. Please refer to the below code snippet for client-side application.

Code Snippet:

SfPdfViewerServer is server-side application. No need to provide the service URL property in SfPdfViewerServer. It can be run without the web service. Please refer to the below code snippet for the server-side application.

Code Snippet:

I tried the client-side control with .NET 5 when using annotations tool like drawing a circle and it takes a long response time. I've attached the code here, can you please have a look?

Attachment: SyncfusionPdfViewerWasmDemo_.NET_5.0_68f10b12.zip

Using SfPdfView in Blazor Wasm really have performance issues when using animation, drawing,.... compare to server control. (Fast & smoothly)

As document highly recommend to use the server control, but my project using Wasm and want to buy Syncfusion license, do we have any plan to upgrade client control to work smoothly or any solution for it ?

This impact alot on my PoC solution that should choose Syncfusion or not since i'm using Blazor WebAssembly.

We are currently working to improve the performance of User Interaction in wasm blazor PDF Viewer. We have considered this as a feature. This feature implementation is in progress and will be available in the 2021 Volume 3 release which is expected to be rolled out at the end of September.

You can track the status using below feedback link,

https://www.syncfusion.com/feedback/22834/performance-improvement-of-pdf-viewer-in-web-assembly

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

Regards,

Vasugi.

Tam Vu · Answer

Hi Vasugi Sivajothi,Thank you for your updated information.I just have a remaining question about how the client cache of the pdf viewer work.For my use case right, I may have a lots of documents displayed in a treeview for example. Every node in the tree represent for a document and when the nodes are displayed, the documents data is loaded.We may want to store these data somewhere in the browser (cache storage).When I use the PdfViewerServer control, document is loaded the first time by DocumentPath setting.Then the document is saved to session storage with key for later loadings. Is this correct?My question is that is it possible make the control to load documents from the cache storage I already have when the treeview is loaded ?Or how can I create the session key for each document in the session storage?Thank you,Tam

Vasugi Sivajothi · Answer

Hi Tam, 
 
Thank you for the update. 
 
Please find the details. 
 




Query 

Details 


 
I just have a remaining question about how the client cache of the pdf viewer work. 
For my use case right, I may have a lots of documents displayed in a treeview for example.  
Every node in the tree represent for a document and when the nodes are displayed, the documents data is loaded. 
We may want to store these data somewhere in the browser (cache storage). 
When I use the PdfViewerServer control, document is loaded the first time by DocumentPath setting. 
Then the document is saved to session storage with key for later loadings. Is this correct? 
 
 

 
After loading document from the path, some of the document information will be stored in session storage. This information will be updated in session storage based on the details from the server.  As we mentioned earlier, SfPdfViewer control is client and server-side oriented. We will store the document in the cache on the server side based on the hashid during the initial loading of the PDF file. After that, we can access the document data from the cache.  
 
And internally we will get some document information like document id, page count, and size of the first 100 pages in the PDF document and send another request asynchronously to get remaining page details like page size of the PDF document. Once get the document information from the server, we will store that information in the session storage for our internal purpose. We will get the first two-page details like page text content and text bounds and annotations from the server and render the first two pages of the PDF document on the client-side and store the same in session storage. Then we will render the remaining pages on demand by scrolling the pages in the PDF Viewer control. Session storage will be updated continuously while rendering the remaining pages of the PDF document. 
 


 
My question is that is it possible make the control to load documents from the cache storage I already have when the treeview is loaded ? 
Or how can I create the session key for each document in the session storage? 
 
 

 
After retrieving some document information from the server, we will store that information in session storage on the client side. It is an internal rendering process of our PDF Viewer control. So, we cannot set the session key and load the PDF document manually from the cache storage. 
 
Please refer to the below documentation for ways to load the documents in the PDF Viewer 
 
https://blazor.syncfusion.com/documentation/pdfviewer/opening-pdf-file/#opening-a-pdf-from-file-system 
 
 
 
Regards, 
Vasugi.

Tam Vu · Answer

Hi Vasugi,Thank you very much for your help.Currently I may have 2 pdf viewers .

From what I see, each instance of the pdf viewer has it's own session storage data now.

Is there a way to have these 2 pdf viewers share the session storage because the document source are the same for both document ?Thank you, Tam.

Selvakumar Murugan · Answer

Hi Tam, 
In our PDF Viewer, we couldn’t maintain common session storage for different PDF Viewer document instances. We have stored the annotation information, form fields information, and other details in session storage. If we use the same session storage for multiple instances, then the conflict will occur for all the PDF Viewer document instances. So, we will not maintain the same session storage for the internal process. Regards,Selvakumar

Query	Details
I just have a remaining question about how the client cache of the pdf viewer work. For my use case right, I may have a lots of documents displayed in a treeview for example. Every node in the tree represent for a document and when the nodes are displayed, the documents data is loaded. We may want to store these data somewhere in the browser (cache storage). When I use the PdfViewerServer control, document is loaded the first time by DocumentPath setting. Then the document is saved to session storage with key for later loadings. Is this correct?	After loading document from the path, some of the document information will be stored in session storage. This information will be updated in session storage based on the details from the server. As we mentioned earlier, SfPdfViewer control is client and server-side oriented. We will store the document in the cache on the server side based on the hashid during the initial loading of the PDF file. After that, we can access the document data from the cache. And internally we will get some document information like document id, page count, and size of the first 100 pages in the PDF document and send another request asynchronously to get remaining page details like page size of the PDF document. Once get the document information from the server, we will store that information in the session storage for our internal purpose. We will get the first two-page details like page text content and text bounds and annotations from the server and render the first two pages of the PDF document on the client-side and store the same in session storage. Then we will render the remaining pages on demand by scrolling the pages in the PDF Viewer control. Session storage will be updated continuously while rendering the remaining pages of the PDF document.
My question is that is it possible make the control to load documents from the cache storage I already have when the treeview is loaded ? Or how can I create the session key for each document in the session storage?	After retrieving some document information from the server, we will store that information in session storage on the client side. It is an internal rendering process of our PDF Viewer control. So, we cannot set the session key and load the PDF document manually from the cache storage. Please refer to the below documentation for ways to load the documents in the PDF Viewer https://blazor.syncfusion.com/documentation/pdfviewer/opening-pdf-file/#opening-a-pdf-from-file-system