VintaSoft Imaging .NET SDK 15.0: Документация для Веб разработчика
В этом разделе
    Добавление веб редактора электронных таблиц в приложение "Angular и ASP.NET Core"
    В этом разделе
    В этом руководстве показано, как создать пустое приложение "Angular и ASP.NET Core" в Visual Studio .NET 2026 и добавить веб редактор электронных таблиц (с возможностью открытия, редактирования и сохранения электронных таблиц (XLSX)) в приложение "Angular и ASP.NET Core".

    Вот шаги, которые необходимо выполнить:

    1. Создайте пустое приложение "Angular и ASP.NET Core".

      Откройте Visual Studio .NET 2026 и создайте новое приложение типа "Angular и ASP.NET Core":

      Настройте приложение для использования .NET 10.0:

    2. Проект "AngularApp1.Server": Добавьте ссылки на nuget-пакеты Vintasoft в проект "AngularApp1.Server".

      Добавьте ссылок на nuget-пакеты "Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers" и "Vintasoft.Imaging.Pdf.Office" в проект "AngularApp1.Server". Другие необходимые nuget-пакеты будут добавлены автоматически.



    3. Проект "AngularApp1.Server": Укажите движок рисования, который должен использоваться VintaSoft Imaging .NET SDK для рисования 2D-графики.

      Если проект "AngularApp1.Server" необходимо использовать в Windows или Linux, следует использовать движок рисования SkiaSharp.
      Если проект "AngularApp1.Server" необходимо использовать только в Windows, следует использовать движок рисования System.Drawing или SkiaSharp.

      Вот шаги, которые необходимо выполнить для использования движка SkiaSharp:
      • Добавьте ссылку на nuget-пакет "Vintasoft.Imaging.Drawing.SkiaSharp". Ссылка на nuget-пакет "SkiaSharp" версии 3.119.0 будет добавлена автоматически.
      • Откройте файл "Program.cs" в проекте "AngularApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" в начало файла - добавленный код указывает, что VintaSoft Imaging .NET SDK должен использовать библиотеку SkiaSharp для рисования 2D-графики.

      Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
      • Добавьте ссылку на nuget-пакет "Vintasoft.Imaging.Gdi".
      • Откройте файл "Program.cs" в проекте "AngularApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало файла - добавленный код указывет, что VintaSoft Imaging .NET SDK должен использовать библиотеку System.Drawing для рисования 2D-графики.

    4. Проект "AngularApp1.Server": Добавьте ссылки на nuget-пакеты.

      • Добавьте ссылку на nuget-пакет "System.IO.Packaging" версии 10.0.0.

    5. Проект "AngularApp1.Server": Создайте веб сервисы, которые позволяют загружать/скачивать файлы и редактировать XLSX документ.

      • Добавьте в проект папку "Controllers".

      • Создайте веб сервис, позволяющий загружать/скачивать файл

        • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
        • Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftFileApiController" и нажмите кнопку "Add".
        • Укажите, что класс MyVintasoftFileApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController

          Вот исходные коды класса MyVintasoftFileApiController: 
          namespace AngularApp1.Server.Controllers
{
    public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
    {

        public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
            : base(hostingEnvironment)
        {
        }

    }
}

      • Создать веб сервис, позволяющий редактировать XLSX документ.

        • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
        • Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftOfficeApiController" и нажмите кнопку "Add"
        • Укажите, что класс MyVintasoftOfficeApiController является производным от класса Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController

          Вот исходные коды класса MyVintasoftOfficeApiController: 
          namespace AngularApp1.Server.Controllers
{
    public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
    {
        public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
            : base(hostingEnvironment)
        {
        }
    }
}

    6. Проект "AngularApp1.Server": Скопируйте тестовый XLSX документ на сервер.

      Создайте папку "wwwroot\UploadedImageFiles\SessionID" в проекте "AngularApp1.Server" и скопируйте тестовый XLSX документ "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\UploadedImageFiles\SalesReport.xlsx" в эту папку. Этот документ будет отображаться в редакторе электронных таблиц.

    7. Проект "AngularApp1.Server": Удалите файлы, которые не нужны в этом руководстве.

      Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" в проекте "AngularApp1.Server" - контроллер WeatherForecast Web API в этом примере не нужен.

    8. Скомпилируйте решение для восстановления зависимостей TypeScript в проекте "angularapp1.client".

    9. Проект "angularapp1.client": Добавьте файлы JavaScript и модули TypeScript в проект "angularapp1.client".

      • Добавьте папку "assets" в папку "src\app\".

      • Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Shared.d.ts, Vintasoft.Imaging.js, Vintasoft.Imaging.d.ts, Vintasoft.Imaging.Office.js и Vintasoft.Imaging.Office.d.ts из папки "<SdkInstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript" в папку "src\app\assets\".

      • Укажите, какие "стандартные" UI-диалоги (UI-диалог переименования рабочего листа, UI-диалог поиска текста и т. д.) должны использоваться веб редактором электронных таблиц.
        • Если веб редактор электронных таблиц должен использовать готовые к использованию "стандартные" UI-диалоги Bootstrap:
          • Добавьте Node-модуль "bootstrap" в файл "package.json". Пересоберите проект для обновления Node-модулей.
            Вот исходные коды файла "package.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"
  }
}
          • Скопируйте файлы Vintasoft.Imaging.Dialogs.Bootstrap.js, Vintasoft.Imaging.Dialogs.Bootstrap.d.ts, Vintasoft.Imaging.Office.Dialogs.Bootstrap.js и Vintasoft.Imaging.Office.Dialogs.Bootstrap.d.ts из папки "<SdkInstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" в папку "src\app\assets\".

        • Если веб редактор электронных таблиц должен использовать готовые к использованию "стандартные" UI-диалоги jQuery UI:
          • Добавьте Node-модуль "jquery-ui-dist" в файл "package.json". Пересоберите проект для обновления Node-модулей.
          • Скопируйте файлы Vintasoft.Imaging.Dialogs.jQueryUI.js, Vintasoft.Imaging.Dialogs.jQueryUI.d.ts, Vintasoft.Imaging.Office.Dialogs.jQueryUI.js и Vintasoft.Imaging.Office.Dialogs.jQueryUI.d.ts из папки "<SdkInstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" в папку "src\app\assets\".

        • Если веб редактор электронных таблиц должен использовать пользовательские "стандартные" UI-диалоги (например, UI-диалоги Angular+Bootstrap), прочтите, как создавать пользовательские "стандартные" UI-диалоги здесь .

      • Добавьте ссылки на используемые JavaScript-библиотеки в секцию "projects => Demo => architect => build => options => scripts" в файле "angular.json", добавьте ссылки на используемые CSS-файлы в секцию "projects => Demo => architect => build => options => styles" в файле "angular.json".
        Вот исходные коды файла "angular.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"
          }
        }
      }
    }
  }
}

      • Скопируйте файлы "Vintasoft.Imaging.css" и "Vintasoft.Imaging.Office.css" с CSS-стилями веб редактора электронных таблиц из папки "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Bin\JavaScript\" в папку "src".
        Добавьте информацию о файлах Vintasoft.Imaging.css и Vintasoft.Imaging.Office.css в секцию "styles" файла "app\angular.json".

    10. Проект "angularapp1.client": Создайте компонент Angular, который позволяет отображать и редактировать документ электронных таблиц.

      • Откройте файл "src\app\app.component.html" в проекте "angularapp1.client", очистите файл, добавьте HTML-разметку (заголовок страницы и DIV-элемент для редактора документа электронных таблиц) в файл "app.component.html": 
        <h1>VintaSoft Spreadsheet Document Editor (Angular + ASP.NET Core)</h1>

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



      • Откройте файл "src\app\app.component.ts" в проекте "angularapp1.client", очистите файл, добавьте код TypeScript в файл "app.component.ts": 
        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';
}



      • Откройте файл "src\app\app.component.css" в проекте "angularapp1.client", добавьте CSS-стили для "spreadsheetDocumentEditorContainer" в файл "app.component.ts": 
        :host {
    max-width: 1280px;
    padding: 2rem;
    text-align: center;
}

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

table {
    margin: 0 auto;
}

.spreadsheetDocumentEditorContainer {
  height: 800px;
}


      • Удалите файл "src\app\app.component.spec.ts" в проекте "angularapp1.client" - файл не нужен.

      • Откройте файл "src\proxy.conf.js" в проекте "angularapp1.client" и укажите, что приложение Angular может иметь доступ к контроллеру ASP.NET Core Web API "/vintasoft/api/" в проекте "AngularApp1.Server": 
        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;

    11. Запустите приложение "Angular и ASP.NET Core" и посмотрите результат.


     

     

    Копирайт © 2007-2026 ООО "ВинтаСофт". Все права защищены.

    Отправить отзыв