1. Home
  2. Forum
  3. Blazor
  4. Displaying PDF using a data url

Displaying PDF using a data url

Hello

In Blazor server I am able to render a PDF using a data url like this:

Razor

<SfPdfViewerServer @ref="PDFViewer" DocumentPath="@DocumentPath">

<Syncfusion.Blazor.PdfViewer.PdfViewerEvents DocumentLoaded="DocumentLoaded"></Syncfusion.Blazor.PdfViewer.PdfViewerEvents>

</SfPdfViewerServer>

Code

DocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(docContent);


In Blazor Wasm I'm attempting to do the same thing (but with different Nuget Packages) like this:

Razor

<SfPdfViewer @ref="PDFViewer" DocumentPath="@DocumentPath" >

<Syncfusion.Blazor.PdfViewer.PdfViewerEvents DocumentLoaded="DocumentLoaded"></Syncfusion.Blazor.PdfViewer.PdfViewerEvents>

</SfPdfViewer>

Code

DocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(docContent);

I get the following message when attemting this:

"Server-side processing to render the PDF files through the web service. You must configure the ServiceURL to proceed with PDF Viewer"


Is it possible to render a data url in Blazor Wasm?


Many thanks











8 Replies
DM Dhivyabharathi Mohan Syncfusion Team February 10, 2022 11:24 AM UTC

Hi DitchFord, 
 
Yes. You can load the PDF document from the URL in the WASM Blazor application too. But we cannot able to directly load the PDF document from the URL directly in our WASM Blazor PDF Viewer control. We need to load them into our PDF Viewer control by creating our own web service as provided in the link and replacing the below load method on the created web service. In this, we have to download the PDF document by using the WebClient class and loaded the same in the PDF Viewer control. And you have missed the serviceUrl property in the client Blazor application. So, the reported issue occurs. Please find the below code snippet for loading the PDF file directly from the static URL to get the issue resolved. 
 
 
Code snippet: 
 
 
<SfPdfViewer DocumentPath="https://www.syncfusion.com/downloads/support/directtrac/general/pd/PDF_Succinctly1631202044" ServiceUrl="https://localhost:44399/pdfviewer" Height="500px" Width="1060px"></SfPdfViewer> 
 
 
  
Code snippet in Controller file: 
 
 
public IActionResult Load([FromBody] Dictionary<string, string> jsonObject) 
        { 
            PdfRenderer pdfviewer = new PdfRenderer(_cache); 
            MemoryStream stream = new MemoryStream(); 
            object jsonResult = new object(); 
            if (jsonObject != null && jsonObject.ContainsKey("document")) 
            { 
 
                if (bool.Parse(jsonObject["isFileName"])) 
                { 
                    string documentPath = GetDocumentPath(jsonObject["document"]); 
                    if (!string.IsNullOrEmpty(documentPath)) 
                    { 
                        byte[] bytes = System.IO.File.ReadAllBytes(documentPath); 
                        stream = new MemoryStream(bytes); 
                    } 
                    else 
                    { 
                        string fileName = jsonObject["document"].Split("://")[0]; 
                        if (fileName == "http" || fileName == "https") 
                        { 
                            WebClient webclient = new WebClient(); 
                            byte[] pdfDoc = webclient.DownloadData(jsonObject["document"]); 
                            stream = new MemoryStream(pdfDoc); 
                        } 
                        else 
                        { 
                            return this.Content(jsonObject["document"] + " is not found"); 
                        } 
                    } 
                } 
                else 
                { 
                    byte[] bytes = Convert.FromBase64String(jsonObject["document"]); 
                    stream = new MemoryStream(bytes); 
                } 
            } 
            jsonResult = pdfviewer.Load(stream, jsonObject); 
            return Content(JsonConvert.SerializeObject(jsonResult)); 
        } 
 
 
 
  
Blazor UG Documentation: 
  
  
  
 
  
 
Run the web service and then run the Blazor WASM application. 
  
 
 
 
  
Please revert to us, if you need further assistance. 
  
 
 
Regards, 
Dhivya. 


DI Ditchford February 10, 2022 12:00 PM UTC

Hey  Dhivya


Thanks for the information.  I don't suppose syncfusion have the same documentation but with a .Net 6.0 Mininmal API instead?

Big ask, I know but thought I would check.


Regards


DM Dhivyabharathi Mohan Syncfusion Team February 11, 2022 11:00 AM UTC

Hi Ditchford, 
 
We were unable to get the exact requirement with the provided details. The provided Web Service will work on .NET 6.0 framework. Could you please let us know whether you need the details to be documented about the provided ASP.NET Web service will work in .NET 6.0 framework? If yes, we will refresh our UG documentation with the changes and let you know once the changes are refreshed. 
 
Regards, 
Dhivya. 


DI Ditchford February 13, 2022 02:30 PM UTC

Hello

My query was not so much about whether it would work in .Net 6.0 it was how you would achieve the same with a Minimal api (new in .Net 6.0).  The Minimal API does away with controllers and has simple end points.  So I was wondering if you had an example of the above but using a Minimal API.


Thanks


DM Dhivyabharathi Mohan Syncfusion Team February 14, 2022 12:54 PM UTC

Hi Richard, 
 
We have shared the sample for minimal API .NET Core Blazor application. Please refer the sample from the below link, 
 
 
 
Please revert to us, if you need further assistance. 
 
Regards, 
Dhivya. 


DI Ditchford February 14, 2022 02:18 PM UTC

Hey  Dhivya


Thanks, but that sample looks like a standard client server api template, not a minimal api. Do you have a sample that uses a minimal api?

Thanks


DM Dhivyabharathi Mohan Syncfusion Team February 15, 2022 02:33 PM UTC

Hi Ditchford, 
 
As of now, we have no sample with Minimal API. We are analyzing the feasibility to prepare a sample to work with Minimal API .NET 6.0. We will check and provide further details on February 17, 2022. 
 
Regards, 
Dhivya. 


DM Dhivyabharathi Mohan Syncfusion Team February 17, 2022 04:40 PM UTC

Hi Ditchford, 
  
 
We have shared the Blazor WASM hosted with the Minimal Web API sample which can be downloaded from the below link 
  
  
 
Please try this and revert to us, if you need further assistance. 
  
 
Regards, 
Dhivya. 


Loader.
Up arrow icon