Add web spreadsheet document editor to an "Angular and ASP.NET Core" application

In This Topic

This tutorial shows how to create a blank "Angular and ASP.NET Core" application in Visual Studio .NET 2026 and add the web spreadsheet document editor (with ability to open, edit and save spreadsheet document (XLSX)) to an "Angular and ASP.NET Core" application.

Here are steps, which must be done:

Create a blank "Angular and ASP.NET Core" application.
Open Visual Studio .NET 2026 and create a new application of "Angular and ASP.NET Core" type:

Configure the application to use .NET 10.0:
"AngularApp1.Server" project: Add references to the Vintasoft nuget-packages to "AngularApp1.Server" project.
Add references to the nuget-packages "Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers" and "Vintasoft.Imaging.Pdf.Office" to the "AngularApp1.Server" project. Other necessary nuget-packages will be added automatically.
"AngularApp1.Server" project: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.
If "AngularApp1.Server" project must be used in Windows or Linux, SkiaSharp drawing engine should be used.
If "AngularApp1.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" nuget-package. Reference to the "SkiaSharp" nuget-package version 3.119.0 will be added automatically.
- Open "Program.cs" file in "AngularApp1.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" nuget-package.
- Open "Program.cs" file in "AngularApp1.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.
"AngularApp1.Server" project: Add reference to nuget-packages.
- Add reference to the "System.IO.Packaging" nuget-package version 10.0.0.
"AngularApp1.Server" project: 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:
    C#
    
    namespace AngularApp1.Server.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:
    C#
    
    namespace AngularApp1.Server.Controllers { public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController { public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
"AngularApp1.Server" project: Copy the default test XLSX document to a server side.
Create folder "wwwroot\UploadedImageFiles\SessionID" in "AngularApp1.Server" project and copy test XLSX document "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\UploadedImageFiles\SalesReport.xlsx" to the folder. This document will be displayed in spreadsheet document editor.
"AngularApp1.Server" project: Delete files, which are not necessary in this tutorial.
Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "AngularApp1.Server" project - the WeatherForecast Web API controller is not necessary in this demo.
Compile the solution for restoring TypeScript-dependencies in "angularapp1.client" project.

"angularapp1.client" project: Add JavaScript files and TypeScript modules to the "angularapp1.client" project.

Add the "assets" folder to the "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 15.0\Bin\JavaScript\" folder to the "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:

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": "angularapp1.client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "run-script-os",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "prestart": "node aspnetcore-https",
    "start:windows": "ng serve --ssl --ssl-cert \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem\" --ssl-key \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key\" --host=127.0.0.1",
    "start:default": "ng serve --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\" --host=127.0.0.1"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "bootstrap": "~5.3.8",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0",
    "jest-editor-support": "*",
    "run-script-os": "*"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

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 15.0\Bin\JavaScript\" folder into "src\app\assets\" folder.

If web spreadsheet document editor 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.Office.Dialogs.jQueryUI.js and Vintasoft.Imaging.Office.Dialogs.jQueryUI.d.ts files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "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.

Add references to used JavaScript libraries to the "projects => Demo => architect => build => options => scripts" section in "angular.json" file, add references to used CSS-files to the "projects => Demo => architect => build => options => styles" section in "angular.json" file.
Here are source codes of "angular.json" file:

JSON

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angularapp1.client": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angularapp1.client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/Vintasoft.Imaging.css",
              "src/Vintasoft.Imaging.Office.css",
              "src/styles.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"
                }
              ],
              "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": "angularapp1.client:build:production"
            },
            "development": {
              "browserTarget": "angularapp1.client:build:development"
            }
          },
          "defaultConfiguration": "development",
          "options": {
            "proxyConfig": "src/proxy.conf.js",
            "port": 65185
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angularapp1.client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "karmaConfig": "karma.conf.js"
          }
        }
      }
    }
  }
}

Copy files "Vintasoft.Imaging.css" and "Vintasoft.Imaging.Office.css" with CSS-styles of Vintasoft web spreadsheet document editor from "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Bin\JavaScript\" folder to the "src\" folder.
Add information about Vintasoft.Imaging.css and Vintasoft.Imaging.Office.css files to the "styles" section of "app\angular.json" file.

"angularapp1.client" project: Create Angular-component that allows to display and edit spreadsheet document.

Open "src\app\app.component.html" file in "angularapp1.client" project, clear the file, add HTML markup (page header and DIV-element for spreadsheet document editor) to the "app.component.html" file:
- HTML
```
<h1>VintaSoft Spreadsheet Document Editor (Angular + ASP.NET Core)</h1>

<div id="spreadsheetDocumentEditorContainer" class="spreadsheetDocumentEditorContainer"></div>
```

Open "src\app\app.component.ts" file in "angularapp1.client" project, clear the file, add TypeScript code to the "app.component.ts" file:

TYPESCRIPT

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  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
    let spreadsheetDocumentEditorControlSettings: Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS =
      new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS("spreadsheetDocumentEditorContainer", "");

    // create the spreadsheet document editor control
    let spreadsheetDocumentEditorControl: Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS =
      new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);

    // open XLSX document
    spreadsheetDocumentEditorControl.openDocument("SalesReport.xlsx");
  }

  title = 'angularapp1.client';
}

Open "src\app\app.component.css" file in "angularapp1.client" project, add CSS-styles for "spreadsheetDocumentEditorContainer" to the "app.component.ts" file:

HTML

:host {
    max-width: 1280px;
    padding: 2rem;
    text-align: center;
}

th, td {
    padding-left: 1rem;
    padding-right: 1rem;
}

table {
    margin: 0 auto;
}

.spreadsheetDocumentEditorContainer {
  height: 800px;
}

Delete file "src\app\app.component.spec.ts" in "angularapp1.client" project - file is not necessary.

Open "src\proxy.conf.js" file in "angularapp1.client" project and specify that Angular aplication can have access to the ASP.NET Core Web API controller "/vintasoft/api/" in "AngularApp1.Server" project:

JavaScript

const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7200';

const PROXY_CONFIG = [
  {
    context: [
      "/vintasoft/api/"
    ],
    target,
    secure: false
  }
]

module.exports = PROXY_CONFIG;

Run the "Angular and ASP.NET Core" application and see the result.

Send Feedback

Create a blank "Angular and ASP.NET Core" application.

"AngularApp1.Server" project: Add references to the Vintasoft nuget-packages to "AngularApp1.Server" project.

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

"AngularApp1.Server" project: Add reference to nuget-packages.

"AngularApp1.Server" project: Create web services, which allow to upload/download file and edit XLSX document.

Create web service that allows to upload/download file

Create web service that allows to edit XLSX document

"AngularApp1.Server" project: Copy the default test XLSX document to a server side.

"AngularApp1.Server" project: Delete files, which are not necessary in this tutorial.

Compile the solution for restoring TypeScript-dependencies in "angularapp1.client" project.

"angularapp1.client" project: Add JavaScript files and TypeScript modules to the "angularapp1.client" project.

"angularapp1.client" project: Create Angular-component that allows to display and edit spreadsheet document.

Run the "Angular and ASP.NET Core" application and see the result.