VintaSoft Imaging .NET SDK 12.4: Documentation for Web developer
In This Topic
    Add web spreadsheet document editor to an ASP.NET Core application with Angular
    In This Topic
    This tutorial shows how to create a blank ASP.NET Core Web application in Visual Studio .NET 2022 and add the web spreadsheet document editor (with ability to open, edit and save spreadsheet document (XLSX)) to an ASP.NET Core application with Angular.


    Here are steps, which must be done:
    1. Create a blank ASP.NET Core Web application.

      Open Visual Studio .NET 2022 and create a new project, of ASP.NET Core Web application type:

      Configure the project to use .NET 8.0:

    2. Server side: Add references to the Vintasoft assemblies to your ASP.NET Core Web application.

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



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

      If ASP.NET application must be used in Windows or Linux, SkiaSharp drawing engine should be used.
      If ASP.NET application 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, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();". 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, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();". 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 and edit XLSX document.

      • Add the "Controllers" folder to the project.
      • 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 Project1.Controllers
          {
              public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
              {
                  public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
              }
          }
          
          
      • Create web service that allows to edit XLSX document

        • 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 "MyVintasoftOfficeApiController" and press the "Add" button
        • Specify that MyVintasoftOfficeApiController class is derived from Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController class

          Here are source codes of MyVintasoftOfficeApiController class:
          namespace Project1.Controllers
          {
              public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
              {
                  public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
              }
          }
          
          
    5. Compile the project for restoring dependencies using 'npm'.

    6. Configure the Angular proxy-server to provide access to the VintaSoft web services.

      • Change the configuration of Angular proxy-server in ClientApp\proxy.conf.js file:

        Here are source codes of "proxy.conf.js" file after update:
        const { env } = require('process');
        
        const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
          env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:43083';
        
        const PROXY_CONFIG = [
          {
            context: [
              "/vintasoft/api/",
              "/favicon.ico"
           ],
            target: target,
            secure: false,
            headers: {
              Connection: 'Keep-Alive'
            }
          }
        ]
        
        module.exports = PROXY_CONFIG;
        
        
    7. Client side: Delete files, which are not necessary in this demo.

      Delete directories "ClientApp\src\app\counter\", "ClientApp\src\app\fetch-data\", "ClientApp\src\app\home\", "ClientApp\src\app\nav-menu\" - these Angular components are not necessary in this demo.

      Open file "ClientApp\src\app\app.component.html" and delete line "<app-nav-menu></app-nav-menu>" from HTML markup - this demo does not need navigation menu.

      Open file "ClientApp\src\app\app.module.ts" and delete code that uses the following Angular components: NavMenuComponent, HomeComponent, CounterComponent, FetchDataComponent - these Angular components are not necessary in this demo.
      Here are source codes of "app.module.ts" file after update:
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { FormsModule } from '@angular/forms';
      import { HttpClientModule } from '@angular/common/http';
      import { RouterModule } from '@angular/router';
      
      import { AppComponent } from './app.component';
      
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
          HttpClientModule,
          FormsModule,
          RouterModule.forRoot([
          ])
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
      
    8. Client side: Add JavaScript files and TypeScript modules to the ASP.NET Core Web application.

      • Add the "assets" folder to the "ClientApp\src\app\" folder.

      • Copy Vintasoft.Shared.js, Vintasoft.Shared.d.ts, Vintasoft.Imaging.js, Vintasoft.Imaging.d.ts, Vintasoft.Imaging.Office.js and Vintasoft.Imaging.Office.d.ts files from "<SdkInstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder to the "ClientApp\src\app\assets\" folder.


      • Specify, which "standard" UI dialogs (rename worksheet dialog, find text dialog, etc) should be used by web spreadsheet document editor
        • If web spreadsheet document editor should use ready-to-use "standard" Bootstrap dialogs:
          • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js, Vintasoft.Imaging.Dialogs.Bootstrap.d.ts, Vintasoft.Imaging.Office.Dialogs.Bootstrap.js and Vintasoft.Imaging.Office.Dialogs.Bootstrap.d.ts files from "<InstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder into "ClientApp\src\app\assets\" folder.
        • If web spreadsheet document editor should use ready-to-use "standard" jQuery UI dialogs:
          • Add jQuery UI to the project:
            • Open command line and go to the "ClientApp\" folder.
            • Execute command "npm install jquery-ui-dist" in command line for installing "jquery-ui-dist" npm-package. Files of jQuery UI will installed in "ClientApp\node_modules\jquery-ui-dist\" folder.
          • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js, Vintasoft.Imaging.Dialogs.jQueryUI.d.ts, Vintasoft.Imaging.Office.Dialogs.jQueryUI.js and Vintasoft.Imaging.Office.Dialogs.jQueryUI.d.ts files from "<InstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder into "ClientApp\src\app\assets\" folder.
        • If web spreadsheet document editor should use custom "standard" dialogs (for example, Angular+Bootstrap dialogs), please read how to create custom "standard" dialogs here.

      • Set "Build Action" to the "TypeScript file" for Vintasoft.Shared.d.ts, Vintasoft.Imaging.d.ts, Vintasoft.Imaging.Dialogs.XXX.d.ts, Vintasoft.Imaging.Office.d.ts and Vintasoft.Imaging.Office.Dialogs.XXX.d.ts files:


      • Add references to the Vintasoft JavaScript files to the "projects => Demo => architect => build => options => scripts" section in "ClientApp\angular.json" file:

        Here are source codes of "angular.json" file after update:
        {
          "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
          "version": 1,
          "newProjectRoot": "projects",
          "projects": {
            "Project1": {
              "projectType": "application",
              "schematics": {
                "@schematics/angular:application": {
                  "strict": true
                }
              },
              "root": "",
              "sourceRoot": "src",
              "prefix": "app",
              "architect": {
                "build": {
                  "builder": "@angular-devkit/build-angular:browser",
                  "options": {
                    "progress": false,
                    "outputPath": "dist",
                    "index": "src/index.html",
                    "main": "src/main.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "tsconfig.app.json",
                    "allowedCommonJsDependencies": [
                      "oidc-client"
                    ],
                    "assets": [
                      "src/assets"
                    ],
                    "styles": [
                      "node_modules/bootstrap/dist/css/bootstrap.min.css",
                      "src/styles.css",
                      "src/Vintasoft.Imaging.css",
                      "src/Vintasoft.Imaging.Office.css"
                    ],
                    "scripts": [
                      "src/app/assets/Vintasoft.Shared.js",
                      "src/app/assets/Vintasoft.Imaging.js",
                      "src/app/assets/Vintasoft.Imaging.Dialogs.Bootstrap.js",
                      "src/app/assets/Vintasoft.Imaging.Office.js",
                      "src/app/assets/Vintasoft.Imaging.Office.Dialogs.Bootstrap.js"
                    ]
                  },
                  "configurations": {
                    "production": {
                      "budgets": [
                        {
                          "type": "initial",
                          "maximumWarning": "500kb",
                          "maximumError": "1mb"
                        },
                        {
                          "type": "anyComponentStyle",
                          "maximumWarning": "2kb",
                          "maximumError": "4kb"
                        }
                      ],
                      "fileReplacements": [
                        {
                          "replace": "src/environments/environment.ts",
                          "with": "src/environments/environment.prod.ts"
                        }
                      ],
                      "outputHashing": "all"
                    },
                    "development": {
                      "buildOptimizer": false,
                      "optimization": false,
                      "vendorChunk": true,
                      "extractLicenses": false,
                      "sourceMap": true,
                      "namedChunks": true
                    }
                  },
                  "defaultConfiguration": "production"
                },
                "serve": {
                  "builder": "@angular-devkit/build-angular:dev-server",
                  "configurations": {
                    "production": {
                      "browserTarget": "Project1:build:production"
                    },
                    "development": {
                      "browserTarget": "Project1:build:development",
                      "proxyConfig": "proxy.conf.js"
                    }
                  },
                  "defaultConfiguration": "development"
                },
                "extract-i18n": {
                  "builder": "@angular-devkit/build-angular:extract-i18n",
                  "options": {
                    "browserTarget": "Project1:build"
                  }
                },
                "test": {
                  "builder": "@angular-devkit/build-angular:karma",
                  "options": {
                    "main": "src/test.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "tsconfig.spec.json",
                    "karmaConfig": "karma.conf.js",
                    "assets": [
                      "src/assets"
                    ],
                    "styles": [
                      "src/styles.css"
                    ],
                    "scripts": []
                  }
                },
                "server": {
                  "builder": "@angular-devkit/build-angular:server",
                  "options": {
                    "outputPath": "dist-server",
                    "main": "src/main.ts",
                    "tsConfig": "tsconfig.server.json"
                  },
                  "configurations": {
                    "dev": {
                      "optimization": true,
                      "outputHashing": "all",
                      "sourceMap": false,
                      "namedChunks": false,
                      "extractLicenses": true,
                      "vendorChunk": true
                    },
                    "production": {
                      "optimization": true,
                      "outputHashing": "all",
                      "sourceMap": false,
                      "namedChunks": false,
                      "extractLicenses": true,
                      "vendorChunk": false
                    }
                  }
                }
              }
            }
          },
          "defaultProject": "Project1",
          "cli": {
            "analytics": false
          }
        }
        
        
    9. Client side: Create Angular component that allows to display and edit spreadsheet document.

      • Create folder "wwwroot\UploadedImageFiles\SessionID" and copy test XLSX document to the folder. This document will be displayed in spreadsheet document editor.

      • Create folder "ClientApp\src\app\spreadsheet-document-editor-demo\".

      • Copy Vintasoft.Imaging.css and Vintasoft.Imaging.Office.css files from "<SdkInstallPath>\VintaSoft\Imaging .NET v12.4\Bin\JavaScript\" folder to the "ClientApp\src\" folder.
        Add information about Vintasoft.Imaging.css and Vintasoft.Imaging.Office.css files to the "styles" section of "Client\app\angular.json" file.

      • Create "spreadsheet-document-editor-demo.html" file that will contain HTML markup of Angular component:
        • Select "Add => New Item..." context menu for folder "ClientApp\src\app\spreadsheet-document-editor-demo\" => "Add new item" dialog will appear
        • Select "HTML Page" type for new item
        • Set "spreadsheet-document-editor-demo.html" as element name
        • Click the "Add" button => dialog will be closed and file "spreadsheet-document-editor-demo.html" will be added into folder "ClientApp\src\app\spreadsheet-document-editor-demo\"

        Add HTML markup (demo header and div element for spreadsheet document editor) to the "spreadsheet-document-editor-demo.html" file:
        <h1>VintaSoft Spreadsheet Document Editor (Angular + ASP.NET Core)</h1>
        
        <div id="spreadsheetDocumentEditorContainer" style="height:800px"></div>
        
        



      • Create "spreadsheet-document-editor-demo.ts" file that will contain code of Angular component:
        • Select "Add => New Item..." context menu for folder "ClientApp\src\app\spreadsheet-document-editor-demo\" => "Add new item" dialog will appear
        • Select "TypeScript File" type for new item
        • Set "spreadsheet-document-editor-demo.ts" as element name
        • Click the "Add" button => dialog will be closed and file "spreadsheet-document-editor-demo.ts" will be added into folder "ClientApp\src\app\spreadsheet-document-editor-demo\"

        Add TypeScript code to the "spreadsheet-document-editor-demo.ts" file:
        import { Component } from '@angular/core';
        
        @Component({
          selector: 'spreadsheet-document-editor-demo',
          templateUrl: './spreadsheet-document-editor-demo.html',
        })
        export class SpreadsheetDocumentEditorDemo {
        
          constructor() {
          }
        
        
          /**
           * Component is initializing.
           */
          ngOnInit() {
            // set the session identifier
            Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionId");
        
            // specify web services, which should be used in this demo
            Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftFileApi");
            Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftOfficeApi");
        
            // create the spreadsheet document editor control settings
            var spreadsheetDocumentEditorControlSettings = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS("spreadsheetDocumentEditorContainer");
        
            // create the spreadsheet document editor control
            var spreadsheetDocumentEditorControl = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);
        
            var fileId = "SalesReport.xlsx";
            // copy the file from global folder to the session folder
            spreadsheetDocumentEditorControl.openDocument(fileId);
          }
        
        }
        
        



      • Add created Angular component to the Angular application module - "ClientApp\src\app\app.module.ts" file.
        Here are source codes of "app.module.ts" file after update:
        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import { FormsModule } from '@angular/forms';
        import { HttpClientModule } from '@angular/common/http';
        import { RouterModule } from '@angular/router';
        
        import { AppComponent } from './app.component';
        import { SpreadsheetDocumentEditorDemo } from './spreadsheet-document-editor-demo/spreadsheet-document-editor-demo';
        
        @NgModule({
          declarations: [
            AppComponent,
            SpreadsheetDocumentEditorDemo
          ],
          imports: [
            BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
            HttpClientModule,
            FormsModule,
            RouterModule.forRoot([
              { path: '', component: SpreadsheetDocumentEditorDemo, pathMatch: 'full' },
            ])
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
        
        

    10. Run the ASP.NET Core Web application with Angular and see the result.