Show or hide the PDF Viewer dynamically in Blazor PDF Viewer Component
7 Oct 20242 minutes to read
In the below code, the PDF Viewer is hidden at page load. Then, on clicking a button, the PDFViewer container will be loaded. When the user clicks on a PDF file (here it is demonstrated with buttons), the PDF Viewer already present on the same page will be updated to show the selected document.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.PdfViewerServer;
@using Syncfusion.Blazor.PdfViewer;
@using System.Net;
<style>
.e-spinner-pane {
display: none !important;
}
</style>
<!--Show or hide the visibility of the PDF Viewer-->
<SfButton OnClick="ShowHidePdfViewer">@Label PDF Viewer</SfButton>
@if (IsShowPDFViewer)
{
<SfButton OnClick="LoadDocument1">Physical Path</SfButton>
<SfButton OnClick="LoadDocument2">Remote Path</SfButton>
<div class="mt-2">
<SfPdfViewerServer @ref="PdfViewerServerRef"
DocumentPath="@Base64Content"
Height="565px"
Width="100%">
</SfPdfViewerServer>
</div>
}
@code
{
SfPdfViewerServer PdfViewerServerRef { get; set; }
string Base64Content { get; set; }
bool IsShowPDFViewer { get; set; }
string Label => IsShowPDFViewer ? "Hide" : "Show";
//This method handles the visibility of the PDFViewer.
void ShowHidePdfViewer() => IsShowPDFViewer = !IsShowPDFViewer;
public void LoadDocument1()
{
//Updates the PDF Viewer container width and height from externally.
PdfViewerServerRef.UpdateViewerContainerAsync();
//Returns a byte array containing the contents of the file.
byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/data/PDF Succinctly.pdf");
//Sets the document path from base64 string.
Base64Content = $"data:application/pdf;base64,{Convert.ToBase64String(byteArray)}";
}
public async Task LoadDocument2()
{
using (var webClient = new WebClient())
{
//Downloads the resource as a byte array from the url specified.
var data = await webClient.DownloadDataTaskAsync("https://www.syncfusion.com/downloads/support/directtrac/general/pd/FSuccinctly-2023061093.pdf");
//Sets the document path from base64 string.
Base64Content = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
}
}
}
NOTE