CODEWITHSUNDEEP
blazorblazor-server-sidepdf-viewerblazor-bootstrap
Pierre Pirnay
Pierre Pirnay

Reputation: 1

pdf viewer Blazor bootstrap

I'm trying to implement the blazor bootstrap pdf viewer,

but when I copy and paste the example code the document does not display.

it's really weird because you can even see that you never get the OnDocumentLoaded event

any idea? do i need to do something extra?

Upvotes: 0

Views: 446

Answers (1)

Jalpa Panchal
Jalpa Panchal

Reputation: 12749

You could try below working sample code to load the pdf in blazor server using Blazor.Bootstrap:

Download and install "Blazor.Bootstrap" nugget package

_Host.cshtml:

@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace BlazorPdfViewerDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorPdfViewerDemo.styles.css" rel="stylesheet" />
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <!-- Include Bootstrap's bundle -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    <script src="_framework/blazor.server.js"></script>
    <script type="module" src="_content/Blazor.Bootstrap/blazor.bootstrap.pdf.js"></script>
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>

</body>
</html>

CustomPdfViewer.razor:

 @page "/pdfviewer"

   @using BlazorBootstrap

<h3>PDF Viewer</h3>

<PdfViewer Class="mb-3"
           Url="pdf/sample.pdf"
           OnDocumentLoaded="OnDocumentLoaded"
           OnPageChanged="OnPageChanged" />

@code {
    private string eventLog { get; set; } = $"Last event: ..., CurrentPage: 0, TotalPages: 0";

    private void OnDocumentLoaded(PdfViewerEventArgs args)
        => eventLog = $"Last event: OnDocumentLoaded, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";

    private void OnPageChanged(PdfViewerEventArgs args)
        => eventLog = $"Last event: OnPageChanged, CurrentPage: {args.CurrentPage}, TotalPages: {args.TotalPages}";
}

_Imports.razor:

@using BlazorBootstrap

Program.cs:

builder.Services.AddScoped<BlazorBootstrap.PdfViewerJsInterop>();

enter image description here

Upvotes: 1

Related Questions