View PDF files using PDF Viewer Component in the Blazor WASM app - (LocalhostAPI)

[Dinu Johnson]

Hi, 
I have two separate project solutions one is API Project which gets the PDF from the local folder and returns as a byte array. I have also created a Blazor WASM app to display the PDF document At first I used Embed tag to display the PDF document and it worked ("https://localhost:7094/api/ PDFDoc /get-preview-pdf-document/Dft-Partnership-102021 "). I have created another Blazor Web Assembly project Based on the document provided that is https://blazor.syncfusion.com/documentation/pdfviewer-2/getting-started/web-assembly-application#add-the-following-propertygroup-and-itemgroup and as the tag used in the blog it was 

<SfPdfViewer2 enable DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

and it worked but when I change the DocumentPath as my local API

API Return code:

    byte[] fileBytes = System.IO.File.ReadAllBytes(documentPath);

    return File(fileBytes, "application/pdf", enableRangeProcessing: true);

 it was just showing the spinner instead of displaying the PDF Document.

[Sathiyaseelan Kannigaraj]

Hi Dinu Johnson,

In the Blazor Web Assembly sample, you cannot directly provide the file path like in the server sample. Instead, you can obtain the local path using the httpClient. Below is a sample code snippet demonstrating this approach. If you encounter any difficulties, please share a demo sample illustrating the issue for further assistance.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWASAM1555058829.zip 

Regards,
Sathiyaseelan K

[Dinu Johnson]

Hi Sathiyaseelan,

Thank you for sharing the zip file. Regarding the issue, based on the zip file you provided, I was able to display the PDF. As mentioned earlier, I have two projects: one that has an API which returns the bytes of a PDF and another that is a Blazor Web Assembly application designed to display the corresponding PDF with the API.

The original API return code was:

byte[] fileBytes = System.IO.File.ReadAllBytes(documentPath);

return File(fileBytes, "application/pdf", enableRangeProcessing: true);

When the return of the above API was passed to the <SfPdfViewer2> in the Blazor Web Assembly solution, instead of displaying the PDF, it was just showing the spinner. On the other hand, when I used a memory stream instead of returning bytes, as shown below:

var memoryStream = new MemoryStream();

using (var stream = new FileStream(filePath, FileMode.Open))

{

    await stream.CopyToAsync(memoryStream);

}

memoryStream.Position = 0;

return File(memoryStream, "application/pdf", Path.GetFileName(filePath));

and by directly passing the API URL to the <SfPdfViewer2>, I was able to display the PDF in the browser.

Thank you for sharing the code.

Regards,

Dinu Johnson

[Sathiyaseelan Kannigaraj]

Hi Dinu Johnson,

We're pleased to hear that your issue has been resolved. Don't hesitate to reach out if you need any further assistance.

Regards,
Sathiyaseelan K