Create a blank Vue and ASP.NET Core application.

• Open Visual Studio .NET 2022 and create a new application of "Vue and ASP.NET Core" type:
  
  
• Configure the application to use .NET 8.0:
  

Server side: Add references to the Vintasoft assemblies to "VueApp1.Server" project.

Server side: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

• Add reference to the Vintasoft.Imaging.Drawing.SkiaSharp.dll assembly.
• Add reference to the SkiaSharp nuget-package version 2.88.9.
• Open "Program.cs" file in "VueApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

• Add reference to the Vintasoft.Imaging.Gdi.dll assembly.
• Open "Program.cs" file in "VueApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails, render image tiles, extract/search text and annotate document.

• Create web service that allows to upload/download file

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
    
  • Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class
    
    Here are source codes of MyVintasoftFileApiController class:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
        {
    
            public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to manage image collection

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftImageCollectionApiController" and press the "Add" button
    
  • Specify that MyVintasoftImageCollectionApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController class
    
    Here are source codes of MyVintasoftImageCollectionApiController class:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController
        {
    
            public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to get information about images, get thumbnails, render image tiles, extract/search text

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftImageApiController" and press the "Add" button
    
  • Specify that MyVintasoftImageApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController class
    
    Here are source codes of MyVintasoftImageApiController class:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
        {
    
            public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to annotate images and documents

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftAnnotationCollectionApiController" and press the "Add" button
    
  • Specify that MyVintasoftAnnotationCollectionApiController class is derived from Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController class
    
    Here are source codes of MyVintasoftAnnotationCollectionApiController class:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftAnnotationCollectionApiController :
            Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController
        {
    
            public MyVintasoftAnnotationCollectionApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

Server side: Create CORS-policy that allows to access web services from client side.

• Open the "Program.cs" file in "VueApp1.Server" project and add code that:
  • Creates CORS-policy that allows to access web services from "localhost"
  • Enables CORS usage in "VueApp1.Server" project
  
  Here are source codes of "Program.cs" file after update:
  
  • C#

  Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
  
  var builder = WebApplication.CreateBuilder(args);
  
  // Add services to the container.
  
  builder.Services.AddControllers();
  
  builder.Services.AddCors(options =>
  {
      options.AddPolicy(name: "CorsPolicy1", policy =>
      {
          policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowAnyHeader().AllowAnyMethod();
      });
  });
  
  var app = builder.Build();
  
  app.UseDefaultFiles();
  app.UseStaticFiles();
  
  // Configure the HTTP request pipeline.
  
  app.UseHttpsRedirection();
  
  app.UseAuthorization();
  
  app.UseCors("CorsPolicy1");
  
  app.MapControllers();
  
  app.MapFallbackToFile("/index.html");
  
  app.Run();
  
  

Server side: Add Newtonsoft JSON for deserialization of JSON annotations.

• Add reference to the Microsoft.AspNetCore.Mvc.NewtonsoftJson nuget-package.
• Open the "Program.cs" file in "VueApp1.Server" project and add code line "builder.Services.AddControllersWithViews().AddNewtonsoftJson();" after line "builder.Services.AddControllers();". This is necessary for correct deserialization of JSON annotations.
  
  Here are source codes of "Program.cs" file after update:
  
  • C#

  Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
  
  var builder = WebApplication.CreateBuilder(args);
  
  // Add services to the container.
  
  builder.Services.AddControllers();
  builder.Services.AddControllersWithViews().AddNewtonsoftJson();
  
  builder.Services.AddCors(options =>
  {
      options.AddPolicy(name: "CorsPolicy1", policy =>
      {
          policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowAnyHeader().AllowAnyMethod();
      });
  });
  
  var app = builder.Build();
  
  app.UseDefaultFiles();
  app.UseStaticFiles();
  
  // Configure the HTTP request pipeline.
  
  app.UseHttpsRedirection();
  
  app.UseAuthorization();
  
  app.UseCors("CorsPolicy1");
  
  app.MapControllers();
  
  app.MapFallbackToFile("/index.html");
  
  app.Run();
  
  

Server side: Update launch URL in 'launchSettings.json' file.

• Open file "Properties\launchSettings.json" in "VueApp1.Server" and clear launch URL:
  

Server side: Copy the default test PDF document to a server side.

• Create folder "UploadedImageFiles\SessionID" in "VueApp1.Server" project and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in document viewer.

Compile the project for restoring dependencies using 'npm'.

Delete files, which are not necessary in this tutorial.

• Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "VueApp1.Server" project - the WeatherForecast Web API controller is not necessary in this tutorial.
  
  
• Delete files "src\components\TheWelcome.vue", "src\components\WelcomeItem.vue" in "vueapp1.client" project - this Vue-component is not necessary in this tutorial.
  
  
• Open file "src\App.vue" in "vueapp1.client" project and delete code that uses the following Vue-components: HelloWorld, TheWelcome - these Vue-components are not necessary in this tutorial.
  Here are source codes of "App.vue" file after update:
  
  • JavaScript

  <script setup>
  </script>
  
  <template>
      <main>
      </main>
  </template>
  
  <style scoped>
  </style>
  
  

Client side: Add JavaScript files to the "vueapp1.client" project.

• Copy files Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.Annotation.js and Vintasoft.Imaging.DocumentViewer.js from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
  
  
• Copy files Vintasoft.Imaging.css and Vintasoft.Imaging.Annotation.css from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
  
  
• Specify, which "standard" dialogs (password dialog, print dialog, etc) should be used by web document viewer
  • If web document viewer should use ready-to-use "standard" Bootstrap dialogs:
    • Add "bootstrap" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
      Here are source codes of "package.json" file after update:
      
      • JSON

      {
        "name": "vueapp1.client",
        "version": "0.0.0",
        "private": true,
        "type": "module",
        "scripts": {
          "dev": "vite",
          "build": "vite build",
          "preview": "vite preview",
          "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
        },
        "dependencies": {
          "vue": "^3.4.21"
        },
        "devDependencies": {
          "@vitejs/plugin-vue": "^5.0.4",
          "eslint": "^8.57.0",
          "eslint-plugin-vue": "^9.23.0",
          "vite": "^5.2.8",
          "bootstrap": "5.3.3"
        }
      }
      
      

    • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
    
    
  • If web document viewer should use ready-to-use "standard" jQuery UI dialogs:
    • Add "jquery-ui-dist" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web document viewer should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.
    
    
• Add references to Vintasoft JavaScript files to the header of "index.html" file in "vueapp1.client" project.
  Add links to the Vintasoft CSS-files to the "index.html" file in "vueapp1.client" project.
  Add link to the "bootstrap.css" file to the "index.html" file in "vueapp1.client" project.
  
  
  Here are source codes of "index.html" file after update:
  
  • HTML

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <link rel="icon" href="/favicon.ico">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vite App</title>
  
      <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.css">
      <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.Annotation.css">
  
      <script src="Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Annotation.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Annotation.Dialogs.Bootstrap.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js" type="text/javascript"></script>
  </head>
  <body>
      <div id="app"></div>
      <script type="module" src="/src/main.js"></script>
  </body>
  </html>
  
  

Client side: Create Vue-component that allows to display document, search and extract text from document, annotate document.

• In "vueapp1.client" project in folder "src\components\" create "DocumentViewerDemo.vue" file that will contain source codes of Vue-component:
  • Select "Add => New Item..." context menu for folder "src\components\" in "vueapp1.client" project => "Add new item" dialog will appear
  • Install template "Vue TypeScript Template" from internet if template is not installed in Visual Studio
  • Select "Vue TypeScript Template" type for new item
  • Set "DocumentViewerDemo.vue" as element name
  • Click the "Add" button => dialog will be closed and file "DocumentViewerDemo.vue" will be added into folder "src\components\"
  
  In DocumentViewerDemo.vue file add template that represents demo header and div-element that will display document viewer:
  
  
  In DocumentViewerDemo.vue file change script type from TypeScript to JavaScript:
  
  
  In DocumentViewerDemo.vue file add 'mounted' function (contains JavaScript code that initializes and creates web document viewer):
  
  
  In DocumentViewerDemo.vue file add CSS-style for Vue-component:
  
  
  Important: Visual Studio uses randomized network port for ASP.NET Core API and you need to update JavaScript code and change web services URL from "https://localhost:7008/" to URL in your application.
  
  Here is HTML/CSS/JavaScript code of DocumentViewerDemo Vue-component:
  
  • JavaScript

  <template>
      <h1>VintaSoft Document Viewer (ASP.NET Core + Vue)</h1>
  
      <div id="documentViewerContainer" class="documentViewerContainer"></div>
  </template>
  
  <script lang="js">
      import { defineComponent } from 'vue';
  
      export default defineComponent({
          mounted() {
              // set the session identifier
              Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
  
              // specify web services, which should be used by Vintasoft Web Document Viewer
              Vintasoft.Shared.WebServiceJS.defaultFileService =
                  new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7008/vintasoft/api/MyVintasoftFileApi");
              Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
                  new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7008/vintasoft/api/MyVintasoftImageCollectionApi");
              Vintasoft.Shared.WebServiceJS.defaultImageService =
                  new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7008/vintasoft/api/MyVintasoftImageApi");
              Vintasoft.Shared.WebServiceJS.defaultAnnotationService =
                  new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7008/vintasoft/api/MyVintasoftAnnotationCollectionApi");
  
              // create settings for document viewer with annotation support
              let docViewerSettings =
                  new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", { annotations: true });
  
              // get items of document viewer
              let items = docViewerSettings.get_Items();
  
              // get the main menu of document viewer
              let mainMenu = items.getItemByRegisteredId("mainMenu");
              // if main menu is found
              if (mainMenu != null) {
                  // get items of main menu
                  let mainMenuItems = mainMenu.get_Items();
  
                  // add "Annotation" menu panel to the main menu
                  mainMenuItems.addItem("annotationsMenuPanel");
              }
  
              // get side panel of document viewer
              let sidePanel = items.getItemByRegisteredId("sidePanel");
              // if side panel is found
              if (sidePanel != null) {
                  // get items of side panel
                  let sidePanelItems = sidePanel.get_PanelsCollection();
  
                  // add "Annotations" panel to the side panel
                  sidePanelItems.addItem("annotationsPanel");
  
                  // add "Text selection" panel to the side panel
                  sidePanelItems.addItem("textSelectionPanel");
  
                  // add "Text searh" panel to the side panel
                  sidePanelItems.addItem("textSearchPanel");
              }
  
              // create the document viewer
              let docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);
  
              // create visual tool that allows to work with annotations, navigate document and select text
              let annotationNavigationTextSelectionTool =
                  docViewer.getVisualToolById("AnnotationVisualTool,DocumentNavigationTool,TextSelectionTool");
              // specify visual tool as mandatory visual tool of document viewer
              docViewer.set_MandatoryVisualTool(annotationNavigationTextSelectionTool);
              // specify visual tool as current visual tool of document viewer
              docViewer.set_CurrentVisualTool(annotationNavigationTextSelectionTool);
  
              // get thumbnail viewer of document viewer
              let thumbnailViewer = docViewer.get_ThumbnailViewer();
              // specify that thumbnail viewer should not cache thumbnails on server side
              thumbnailViewer.set_UseCache(false);
  
              // get image viewer of document viewer
              let imageViewer = docViewer.get_ImageViewer();
              // specify that image viewer should not cache image tiles on server side
              imageViewer.set_UseCache(false);
              // open file from session folder and add images from file to the image viewer
              imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
          }
      });
  </script>
  
  <style scoped>
      h1 {
          width: 1200px;
          text-align: center;
      }
  
      .documentViewerContainer {
          width: 1200px;
          height: 800px;
      }
  </style>
  

  
  
• Add created Vue-component to the Vue-application code - "src\App.vue" file.
  
  
  Here are source codes of "App.vue" file after update:
  
  • JavaScript

  <script setup>
      import DocumentViewerDemo from './components/DocumentViewerDemo.vue'
  </script>
  
  <template>
      <main>
          <DocumentViewerDemo />
      </main>
  </template>
  
  <style scoped>
  </style>
  
  

Run the Vue and ASP.NET Core application and see the result.