How to Create a Blazor Web App for Document PDF Viewing and Annotation

Dynamsoft Capture Vision Trial License: The trial license provides access to all features of the Dynamsoft Capture Vision Bundle, including Barcode, MRZ, Document recognition, and more, for a period of 30 days. You can apply for a trial license . Here's how to migrate the code to your Blazor WebAssembly project:

1. 
   

   Create a Document Scanner Component: Create a new Razor component called DocumentScanner.razor in the Pages folder and add it to the navigation menu in NavMenu.razor:
   
   

   
   
   CODE Kopieren

   <div class="nav-item px-3">
   
       <NavLink class="nav-link" href="documentscanner">
   
           <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Document Scanner
   
       </NavLink>
   
   </div>
   
   

   
   
   


2. 
   

   Implement the Document Scanner in DocumentScanner.razor: Add the following code in DocumentScanner.razor to set up the document scanner functionality:
   
   

   
   
   CODE Kopieren

   @page "/documentscanner"
   
   @inject IJSRuntime JSRuntime
   
   
   
   @if (isLoading)
   
   {
   
       <div id="loading-indicator" class="loading-indicator">
   
           <div class="spinner"></div>
   
       </div>
   
   }
   
   
   
   <div id="@containerId" class="container"></div>
   
   
   
   @code {
   
       private Boolean isLoading = true;
   
       private String containerId = "document_scanner";
   
       protected override async Task OnAfterRenderAsync(bool firstRender)
   
       {
   
           if (firstRender)
   
           {
   
               await JSRuntime.InvokeVoidAsync("jsFunctions.initDocumentScanner", containerId);
   
               isLoading = false;
   
               StateHasChanged();
   
           }
   
       }
   
   }
   
   

   
   
   
   

   Explanation

   
   
   
   
   
   • 
     @page "/documentscanner" sets the route for the component.
   
   
   • 
     OnAfterRenderAsync() initializes the document scanner by calling the JavaScript function initDocumentScanner when the page loads.
   
   
   
   


3. 
   

   Reuse JavaScript Code: Copy uiConfig.js and utils.js from the .NET MAUI Blazor Hybrid App to the Blazor WebAssembly project. These files contain essential UI configuration and utility functions for the document scanner. Next, add the document scanner creation code to jsInterop.js:
   
   

   
   
   CODE Kopieren

   window.jsFunctions = {
   
       ...
   
       initDocumentScanner: async function (containerId) {
   
           if (!isInitialized) {
   
               alert("Please set the license first.");
   
               return;
   
           }
   
   
   
           try {
   
               await initDocDetectModule(Dynamsoft.DDV, Dynamsoft.CVR);
   
   
   
               const captureViewer = new Dynamsoft.DDV.CaptureViewer({
   
                   container: containerId,
   
                   uiConfig: isMobile() ? mobileCaptureViewerUiConfig : pcCaptureViewerUiConfig,
   
                   viewerConfig: {
   
                       acceptedPolygonConfidence: 60,
   
                       enableAutoDetect: true,
   
                   }
   
               });
   
   
   
               await captureViewer.play({ resolution: [1920, 1080] });
   
   
   
               captureViewer.on("showPerspectiveViewer", () => switchViewer(0, 1, 0));
   
   
   
               const perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({
   
                   container: containerId,
   
                   groupUid: captureViewer.groupUid,
   
                   uiConfig: isMobile() ? mobilePerspectiveUiConfig : pcPerspectiveUiConfig,
   
                   viewerConfig: { scrollToLatest: true }
   
               });
   
   
   
               perspectiveViewer.hide();
   
               perspectiveViewer.on("backToCaptureViewer", () => {
   
                   switchViewer(1, 0, 0);
   
                   captureViewer.play();
   
               });
   
   
   
               perspectiveViewer.on("showEditViewer", () => switchViewer(0, 0, 1));
   
   
   
               const editViewer = new Dynamsoft.DDV.EditViewer({
   
                   container: containerId,
   
                   groupUid: captureViewer.groupUid,
   
                   uiConfig: isMobile() ? mobileEditViewerUiConfig : pcEditViewerUiConfig
   
               });
   
   
   
               editViewer.hide();
   
               editViewer.on("backToPerspectiveViewer", () => switchViewer(0, 1, 0));
   
   
   
               const switchViewer = (c, p, e) => {
   
                   captureViewer.hide();
   
                   perspectiveViewer.hide();
   
                   editViewer.hide();
   
                   if (c) captureViewer.show();
   
                   else captureViewer.stop();
   
                   if (p) perspectiveViewer.show();
   
                   if (e) editViewer.show();
   
               };
   
   
   
           }
   
           catch (e) {
   
               console.log({
   
                   container: containerId,
   
                   uiConfig: isMobile() ? mobilePerspectiveUiConfig : pcPerspectiveUiConfig,
   
                   viewerConfig: { scrollToLatest: true }
   
               });
   
               alert(e);
   
           }
   
       }
   
   };
   
   

   
   
   
   

   Explanation

   
   
   
   
   
   • 
     initDocumentScanner() initializes the document scanner by creating instances of CaptureViewer, PerspectiveViewer, and EditViewer. These viewers allow users to capture images, adjust perspectives, and edit images before saving them as PDFs.
   
   
   • The switchViewer() function manages transitions between the capture, perspective, and edit viewers based on user actions.
   
   
   
   

Step 4: Run the Blazor Document PDF Viewing and Annotation Application

To run the application, press F5 in Visual Studio. This will launch the Blazor application in your default web browser, starting on the home page where you can activate the SDK by entering your Dynamsoft Capture Vision trial license key and clicking the Activate the SDK button.

• 
  

  Document Viewer: Load a PDF by clicking the add file button. You can navigate through pages, zoom, and annotate the document using various tools.

  
  
  
  

Source Code

https://github.com/yushulx/blazor-barcode-mrz-document-scanner