VintaSoft Imaging .NET SDK 12.4: Documentation for Web developer
In This Topic
    Add web document viewer to a Vue and ASP.NET Core application
    In This Topic
    This tutorial shows how to create a blank Vue and ASP.NET Core application in Visual Studio .NET 2022 and add web document viewer (with ability to open images and documents (PDF, DOCX, XLSX), extract/search text, annotate documents) to Vue and ASP.NET Core application.

    Here are steps, which must be done:
    1. 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:
    2. Server side: Add references to the Vintasoft assemblies to "VueApp1.Server" project.

      Copy Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Imaging.Annotation.dll, Vintasoft.Imaging.Annotation.Pdf.dll, Vintasoft.Imaging.Office.OpenXml, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll, Vintasoft.Imaging.Annotation.Web.Services.dll, Vintasoft.Imaging.AspNetCore.ApiControllers.dll and Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.dll assemblies from "<SdkInstallPath>\VintaSoft Imaging .NET v12.4\Bin\DotNet8\AnyCPU\" directory to the "Bin" directory of "VueApp1.Server" project and add references to assemblies in "VueApp1.Server" project.



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

      If "VueApp1.Server" project must be used in Windows or Linux, SkiaSharp drawing engine should be used.
      If "VueApp1.Server" project must be used in Windows only, System.Drawing or SkiaSharp drawing engine should be used.

      Here are steps, which should be made for using SkiaSharp engine:
      • Add reference to the Vintasoft.Imaging.Drawing.SkiaSharp.dll assembly.
      • Add reference to the SkiaSharp nuget-package version 2.88.6.
      • 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.

      Here are steps, which should be made for using System.Drawing engine:
      • 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.

    4. 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:
          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:
          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:
          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:
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftAnnotationCollectionApiController :
                  Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController
              {
          
                  public MyVintasoftAnnotationCollectionApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
              }
          }
          
          
    5. 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:
        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();
        
        
    6. 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:
        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();
        
        
    7. Server side: Update launch URL in 'launchSettings.json' file.

      • Open file "Properties\launchSettings.json" in "VueApp1.Server" and clear launch URL:
    8. 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 v12.4\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in document viewer.
    9. Compile the project for restoring dependencies using 'npm'.

    10. 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:
        <script setup>
        </script>
        
        <template>
            <main>
            </main>
        </template>
        
        <style scoped>
        </style>
        
        
    11. 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 v12.4\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.

      • Copy files Vintasoft.Imaging.css and Vintasoft.Imaging.DocumentViewer.css from "<InstallPath>\VintaSoft Imaging .NET v12.4\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:
            {
              "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 v12.4\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, Vintasoft.Imaging.Dialogs.jQueryUI.d.ts, Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js and Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.d.ts files from "<InstallPath>\VintaSoft Imaging .NET v12.4\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:
        <!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.DocumentViewer.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>
        </head>
        <body>
            <div id="app"></div>
            <script type="module" src="/src/main.js"></script>
        </body>
        </html>
        
        
    12. 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:
        <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:
        <script setup>
            import DocumentViewerDemo from './components/DocumentViewerDemo.vue'
        </script>
        
        <template>
            <main>
                <DocumentViewerDemo />
            </main>
        </template>
        
        <style scoped>
        </style>
        
        
    13. Run the Vue and ASP.NET Core application and see the result.