Displaying PDFs in Blazor.
In this post, I go over a few options for displaying a PDF in a Blazor app, from the straightforward iframe src attribute embedding to ultilizing IJSRuntime for integration with JavaScript.
If you can access the PDF directly via an open GET endpoint, the easiest way is to embed the PDF in an iframe by setting the `src` attribute to the URL of the PDF, as shown in the snippet below generated by ChatGPT.
@page "/pdfviewer"
<h3>PDF Viewer</h3>
<iframe src="@PdfUrl" width="800" height="600" frameborder="0"></iframe>
@code {
// Replace this URL with the actual URL of the PDF from your open REST API
private string PdfUrl = "https://example.com/api/get-pdf";
}
However, if you need to include a bearer or security token in the header when calling the URL, the above method does not work since you don’t have a way to customize the header via src or other attributes of the iframe. One approach in this case is to programmatically construct the request to retrieve the PDF content as a byte array and set the data in the src attribute of the iframe, as shown in the below snippet generated by ChatGPT.
@page "/pdfviewer"
<h3>PDF Viewer</h3>
<iframe src="@PdfBase64" width="800" height="600" frameborder="0"></iframe>
@code {
private string PdfBase64;
protected override async Task OnInitializedAsync()
{
// Replace these values with your actual API endpoint and authentication logic
var apiUrl = "https://example.com/api/get-pdf";
var authToken = "YourAuthToken";
// Call the helper method to retrieve the Base64-encoded PDF content
PdfBase64 = await GetBase64Pdf(apiUrl, authToken);
}
private async Task<string> GetBase64Pdf(string apiUrl, string authToken)
{
using (var httpClient = new HttpClient())
{
// Set up headers, including authentication token if needed
if (!string.IsNullOrEmpty(authToken))
{
httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", authToken);
}
// Make the API request to get the PDF content
var response = await httpClient.GetAsync(apiUrl);
if (response.IsSuccessStatusCode)
{
// Convert the response content to Base64
var pdfBytes = await response.Content.ReadAsByteArrayAsync();
var base64String = Convert.ToBase64String(pdfBytes);
return $"data:application/pdf;base64,{base64String}";
}
else
{
// Handle error scenarios based on your application needs
// For simplicity, we return an empty string in case of an error
return string.Empty;
}
}
}
}
The above solution works, but it copies the content of the PDF into memory and may cause performance issues for large PDFs. A more efficient solution is to stream the PDF content from the endpoint and use JavaScript to construct an object URL, which can be directly assigned to the src attribute of the iframe, as shown in the snippet below generated by ChatGPT.
@page "/pdfviewer"
<h3>PDF Viewer</h3>
<iframe id="pdfIframe" width="800" height="600" frameborder="0"></iframe>
@code {
private string PdfContent;
[Inject]
private IJSRuntime JSRuntime { get; set; }
protected override async Task OnInitializedAsync()
{
// Replace these values with your actual API endpoint and authentication logic
var apiUrl = "https://example.com/api/get-pdf";
var authToken = "YourAuthToken";
// Call the helper method to retrieve the PDF content
PdfContent = await GetPdfContent(apiUrl, authToken);
}
private async Task<string> GetPdfContent(string apiUrl, string authToken)
{
using (var httpClient = new HttpClient())
{
// Set up headers, including authentication token if needed
if (!string.IsNullOrEmpty(authToken))
{
httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", authToken);
}
// Make the API request to get the PDF content
var response = await httpClient.GetAsync(apiUrl);
if (response.IsSuccessStatusCode)
{
// Read the PDF content as a string
return await response.Content.ReadAsStringAsync();
}
else
{
// Handle error scenarios based on your application needs
// For simplicity, we return an empty string in case of an error
return string.Empty;
}
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
// Use JavaScript to set the iframe src attribute with the PDF content
await JSRuntime.InvokeVoidAsync("createPdfObjectUrl", PdfContent, "pdfIframe");
}
}
}
async function createPdfObjectUrl(stream, elementId) {
const buffer = await stream.arrayBuffer();
const blob = new Blob([buffer], { type: 'application/pdf' });
const objectUrl = URL.createObjectURL(blob);
const iframe = document.getElementById(elementId);
iframe.src = objectUrl;
// We don't need to keep the object url, let's release the memory
URL.revokeObjectURL(objectUrl);
}
The above example loads the PDF content inside OnInitializedAsync() and calls the JavaScript function inside OnAfterRenderAsync(), using IJSRuntime. You can also load the PDF and call the JavaScript function on demand, for example, when the user clicks on a button.
The trick to the above solution is to realize that you need to explicitly load the script file before you can call the JavaScript function from the Blazor component. In my app, which is a Blazor server app, I load the JavaScript file in _host.cshtml, but using _layout.cshtml works fine as well. In a web assembly project, you probably need to use index.html. The code snippet below from ChatGPT shows an example of loading the script in _host.cshtml.
<!DOCTYPE html>
<html>
<head>
<!-- Other head elements -->
<!-- Reference your JavaScript file -->
<script src="js/pdfviewer.js"></script>
</head>
<body>
<!-- The rest of your HTML content -->
<div id="app">
<component type="typeof(App)" render-mode="ServerPrerendered" />
</div>
<!-- Other body elements -->
</body>
</html>
The above example assumes the js directory is under the wwwroot folder. Placing the JavaScript file under the wwwroot directory makes referencing the files simple since you can treat the wwwroot as the root directory of your web app. However, you may want to group all the related codes and files for the component together. In such a case, you can place the JavaScript file under the same path where you have the Blazor component. I prefer grouping the files together if the JavaScript codes are specific to the component.
Collocated JS files are publicly addressable using the path to the file in the project:
ASP.NET Core Blazor JavaScript interoperability (JS interop) | Microsoft Learn
- Pages, views, and components from a collocated scripts file in the app:
{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}.js
- The
{PATH}placeholder is the path to the page, view, or component.- The
{PAGE, VIEW, OR COMPONENT}placeholder is the page, view, or component.- The
{EXTENSION}placeholder matches the extension of the page, view, or component, eitherrazororcshtml.
If you run into issues with calling the JavaScript function, inspect the browser and ensure that the JavaScript file has been loaded under Sources, and check the console for errors.
Happy coding!
References
Call JavaScript functions from .NET methods in ASP.NET Core Blazor | Microsoft Learn
ASP.NET Core Blazor JavaScript interoperability (JS interop) | Microsoft Learn