how can I show the pdf file content inside from razor file

Question

I created a document file from word and has exported as pdf . i want to show the pdf content inside the Div element in razor page. How can I show the pdf content from razor page. Please can you provide an example code how to show in blazor server side

Answer 1

If you stored your pdf file directly in your documents for example in the folder wwwroot/pdf.
wwwroot/pdf/test.pdf

You can display this PDF with this line of html bellow :
< embed src="pdf/test.pdf" style="width=100%; height=2100px;" />
It will provide you a pdf displayer with printing options !

If you want to go further, upload your file and then display it, I will recommend you to go check this explanation :
https://www.learmoreseekmore.com/2020/10/blazor-webassembly-fileupload.html
The upload for PDF files works the same as Img file, you need to go check IBrowserFile documentation.
You will see that it has a Size obj and a OpenReadStream() function that will help you get the display Url for your file (image or pdf)

If the site abow closes, this is the upload code that is shown on it :

@code{
    List<string> imgUrls = new List<string>();
    private async Task OnFileSelection(InputFileChangeEventArgs e)
    {
        foreach (IBrowserFile imgFile in e.GetMultipleFiles(5))
        {
            var buffers = new byte[imgFile.Size];
            await imgFile.OpenReadStream().ReadAsync(buffers);
            string imageType = imgFile.ContentType;
            string imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffers)}";
            imgUrls.Add(imgUrl);
        }
    }
}

This code was written by Naveen Bommidi, author of the blog where I found this usefull code

If you want, as I said, upload a PDF and then display it.
You can use the same html line :
< embed src="@imgUrl" style="width=100%; height=2100px;" />
And your uploaded files will be displaying.

Example