PDF Viewer in Blazor Web Assembly asp.net core hosted

Question

Can you
provide a working sample of using client side PDF Viewer in Blazor Web Assembly
asp.net core hosted app, where the server side hosts the controller for the for
PDF Viewer to perform server-side preprocessing of the PDF document to be
rendered in client-side similar what is done in https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version

Akshaya Arivoli · Accepted Answer

Hi Gudmundur,   
  
Thank you for contacting Syncfusion support.   
  
We have created a simple PDF Viewer sample in Blazor Web Assembly asp.net core hosted app and shared the same in the below link,   
  
https://www.syncfusion.com/downloads/support/forum/158750/ze/blazor-pdfviewer-wasm-2116550555    
   
Please try it and revert us if any concerns.  

Regards, 
Akshaya

Gudmundur Gislason · Answer

Thank you, it works like expected

Akshaya Arivoli · Answer

Hi Gudmundur,   
  
Thank you for your update. We are glad to know that the provided details resolved your issue. Please revert us if you need further assistance in feature. 

Regards, 
Akshaya

Alexander Hasel · Answer

Hi Gudmundur,   
  
Thank you for contacting Syncfusion support.   
  
We have created a simple PDF Viewer sample in Blazor Web Assembly asp.net core hosted app and shared the same in the below link,   
  
https://www.syncfusion.com/downloads/support/forum/158750/ze/blazor-pdfviewer-wasm-2116550555    
   
Please try it and revert us if any concerns.  

Regards, 
Akshaya  Hi Akshaya,I'm working on a webassembly application with syncfusion controls on .NET 5 on server and client-side.At the moment, I try to use the PdfViewer-Control with a PdfController on the server side. I downloadedyour provided example.The example works quite well, but the example isn't based on .NET 5 on the Client-Side and the Server-Side. So I will ask you, if you can provide me an example with .NET 5 on Client, Server and Shared?Alex.

Dhivyabharathi Mohan · Answer

Hi Alexander,   
    
We have created a hosted sample in .Net 5.0 with the client, server, and shared. Kindly download the sample from the below link.   
 
    
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Hosted_Sample-1396941772    
    
    
Kindly try it and revert us if you have any concerns.   
 
 
Regards, 
Dhivya.

Austin · Answer

Hi -Thank you for this demo application, this is exactly what I was trying to do.There is one piece of your demo app that I am having trouble reproducing in my app.In the SfPdfViewer client-side element, you are able to just reference the api controller in the ServiceUrl attribute:

ServiceUrl="/PdfViewer"

When I do this I get an error that "

Only 'http' and 'https' schemes are allowed. Parameter name: requestUri"For some reason that I cannot figure out, the ServiceUrl is not adding the entire base uri to the api call.  However when I manually define the base uri in the ServiceUrl attribute it works fine:

ServiceUrl="https://localhost:44396/PdfViewer"

Can you give me any direction as to what I'm missing to add this feature to my application?Also - When using the pdf viewer on a WASM app that uses Authorization, there is an error generated because of the access tokens that are required.Microsoft.AspNetCore.Components.WebAssembly.Authentication.AccessTokenNotAvailableException: ''Is there a way to configure this in the PDF viewer?Thanks

Dhivyabharathi Mohan · Answer

Hi Austin,

Thank you for contacting Syncfusion support.

Please find the details,

Query

Details

Thank you for this demo application, this is exactly what I was trying to do.

There is one piece of your demo app that I am having trouble reproducing in my app.

In the SfPdfViewer client-side element, you are able to just reference the api controller in the ServiceUrl attribute:

ServiceUrl="/PdfViewer"

When I do this I get an error that " Only 'http' and 'https' schemes are allowed. Parameter name: requestUri"

For some reason that I cannot figure out, the ServiceUrl is not adding the entire base uri to the api call. However when I manually define the base uri in the ServiceUrl attribute it works fine:

ServiceUrl="https://localhost:44396/PdfViewer"

Can you give me any direction as to what I'm missing to add this feature to my application?

Thank you for your update. We were able to reproduce the reported issue that the document is not loading in the Blazor Hosted Application. We have already logged this as defect and the fix for the changes will be included in our upcoming weekly NuGet release on December 15, 2021. You can track the status using the below feedback link,

https://www.syncfusion.com/feedback/30769/pdf-document-is-not-loading-properly-in-the-blazor-hosted-sample

Also - When using the pdf viewer on a WASM app that uses Authorization, there is an error generated because of the access tokens that are required.

Microsoft.AspNetCore.Components.WebAssembly.Authentication.AccessTokenNotAvailableException: ''

Is there a way to configure this in the PDF viewer?

You can configure the token on the server side. To deal with this authentication in the PDF Viewer client we have exposed a property ajaxRequestSettings to add the header value for each request of PDF Viewer. We have shared the code snippet and sample for your reference.

Code snippet:

<SfPdfViewer DocumentPath="PDF_Succinctly.pdf" ServiceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer" Height="500px" Width="1060px">

<PdfViewerAjaxRequestSettings AjaxHeaders="Headers"></PdfViewerAjaxRequestSettings>

</SfPdfViewer>

@code {

public List<AjaxHeader> Headers = new List<AjaxHeader>() { new AjaxHeader { HeaderName = "Authorization", HeaderValue = "Bearer 64565dfgfdsjweiuvbiuyhiueygf" } };

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWebAssembly-814305460

Kindly try this and revert us, if you have any concerns.

Regards,

Dhivya.

Dhivyabharathi Mohan · Answer

Hi Austin,

Sorry for the inconvenience. The fix was not included in our latest weekly NuGet release. It will be available in our upcoming Volume 4 main release which is expected to be rolled out on December 17^th, 2021.

Regards,Dhivya.

Don Toomey · Answer

Will you create a "PDF Viewer in Blazor Web Assembly asp.net core hosted" app that works with net6.0?The app that you created for net5.0 doesn't work when I update it to net6.0.https://www.syncfusion.com/downloads/support/forum/158750/ze/blazor-pdfviewer-wasm-2116550555 After changing PDFViewerFeatures.razor DocumentPath="Blazor_Succinctly.pdf" instead of DocumentPath="PDF_Succinctly.pdf" the pdf file displayed correctly in net5.0.From: To: When I set the app to use net6.0 and update the NuGet packages (see below), the pdf doesn't display. When I set breakpoints in PdfViewerController.cs on the constructor and on Load, the breakpoints are never reached.Your app using net5.0:net5.0 When I change it to work with net6.0: net6.0 Another problem I am having with your app is when I add PdfViewerController.cs to my project, swagger returns an error when trying to display the API's. The error message is:Failed to load API definition.Fetch errorresponse status is 500 https://localhost:7183/swagger/v1/swagger.json Do you have any idea what can be done so it works with swagger?Thanks

Muhammad Saad Shaukat · Answer

I am facing the same issue ever since I upgraded my project to .net 6.0, Blazor PDF viewer not working Blazor WASM hosted Application in Linux, followed all the steps from missing Linux packages to Pdfium, still I get "Web Service Not running". However the same runs perfectly in Windows

Shamini Kiruba Sobers · Answer

Hi
Don/Muhammad,We are working
on your queries and we will update further details on June 2, 2022.Regards,Shamini

Vasugi Sivajothi · Answer

Hi Team,We regret the delay. Currently,
we are checking the reported issues with the provided details. We will analyze
further on this and update you with more details on or before June 6, 2022.Regards,Vasugi.

Shamini Kiruba Sobers · Answer

Hi Don/Muhammad,We have created the simple Blazor PDF Viewer hosted sample
with swagger configuration and it can be downloaded from the following link.Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/blazor-pdfviewer1270477668Kindly refer to the below UG documentation to resolve the PDFIUM
issue.https://blazor.syncfusion.com/documentation/pdfviewer/how-to/unexpected-tokenIf you are still facing any issues, please revert to us with
more details like error details, network tab response details, and a simple
issue reproducing sample to replicate the issue at our end and provide a prompt
solution at the earliest.Regards,Shamini

Don Toomey · Answer

The app that you provided works great using version 20.1.0.60 of the components.It stops working when using version 20.2.0.43 of the components.  Once again, it no longer calls the constructor in PdfViewerController.cs.  When trying to view a pdf file, the website becomes unresponsive unless you manually change the URL to a valid page.What was changed so it is no longer working?Will you please create another app where it works with the most recent version of you nightly NuGet packages?Thank you for your help

Sinthiya Kalimuthu · Answer

Hi Don,We have checked the sample uploaded
already and find that it works proper with latest NuGet version
(v20.2.0.43). We have modified the NuGet version in the older sample
to get this work and have shared the modified
sample for your reference. Kindly try this and
revert to us if you have any concerns.Sample Link - https://www.syncfusion.com/downloads/support/directtrac/general/ze/blazor-pdfviewer_Sample518432405.zipRegards,Sinthiya K

vijaymohan · Answer

Its working in Development Environment after publish its not work in production environment. please find the screenshotAttachment: pdfviewprderr_71644670.zip

Visvesvar Venkatesan · Answer

Hi Vijaymohan,On checking in our online sample it works fine for us.Kindly find the online sample which we checked - https://blazor.syncfusion.com/demos/pdf-viewer/default-functionalities?theme=fluent Kindly try it in our online sample and revert to us with more details to replicate the issue.Regards,Visvesvar K V