VintaSoft Imaging .NET SDK 14.0: Документация для Веб разработчика
В этом разделе
    Добавление веб редактора PDF документа в приложения Angular и ASP.NET Core
    В этом разделе
    В этом руководстве показано, как создать пустое приложение Angular и ASP.NET Core в Visual Studio .NET 2022 и добавить редактор PDF документа в приложение Angular и ASP.NET Core.

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

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

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

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

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

      Скопируйте сборки Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll, Vintasoft.Imaging.AspNetCore.ApiControllers.dll, Vintasoft.Imaging.Pdf.Web.Services.dll, Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers.dll из каталога "\VintaSoft Imaging .NET 14.0\Bin\DotNet8\AnyCPU\" в каталог "Bin" проекта "AngularApp1.Server" и добавьте ссылки на сборки в проекте "AngularApp1.Server".



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

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

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

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

    4. Сторона сервера: Создайте веб-сервисы, которые позволяют загружать/скачивать файлы, управлять коллекцией изображений, получать информацию об изображениях, получать миниатюры, отображать плитки изображений, работать с PDF документами.

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

        • Нажмите правую кнопку мыши на папке "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)
        {
        }

    }
}

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

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

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

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

    }
}

      • Создайте веб сервис, который позволяет получать информацию об изображениях, получать миниатюры, рендерить тайлы изображений, извлекать/искать текст

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

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

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

    }
}

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

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

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

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

    }
}

    5. Серверная сторона: Создайте CORS-политику, позволяющую получать доступ к веб сервисам из клиентского приложения.

      • Откройте файл "Program.cs" в проекте "AngularApp1.Server" и добавьте код, который:
        • Создает CORS-политику, которая позволяет получать доступ к веб сервисам с веб сервера "localhost"
        • Включает использование CORS в проекте "AngularApp1.Server"

        Вот исходные коды файла "Program.cs" после обновления: 
        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. Серверная сторона: Обновите стартовый URL-адрес приложения в файле "launchSettings.json".

      • Откройте файл "Properties\launchSettings.json" в "AngularApp1.Server" и очистите стартовый URL-адрес приложения:

    7. Сторона сервера: Скопируйте тестовый PDF документ по умолчанию на сторону сервера.

      • Создайте папку "UploadedImageFiles\SessionID" в проекте "AngularApp1.Server" и скопируйте тестовый PDF документ "\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" в папку. Этот документ будет отображен в редакторе PDF документа.

    8. Скомпилируйте проект для восстановления зависимостей с помощью 'npm'

    9. Клиентская сторона: Удалите файлы, которые являются не нужными в этом руководстве.

      • Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" в проекте "AngularApp1.Server" - ASP.NET Core Web API контроллер WeatherForecast не требуется в этом руководстве.

      • Удалить файлы "src\app\app.comComponent.css", "src\app\app.comComponent.html", "src\app\app.comComponent.spec.ts", "src \app\app.comComponent.ts" в проекте "angularapp1.client" - этот Angular-компонент не требуется в этом руководстве.

    10. Клиентская сторона: Добавьте JavaScript-файлы и TypeScript-модули в проект "angularapp1.client".

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

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

      • Укажите, какие "стандартные" UI-диалоги (UI-диалог ввода пароля, UI-диалог печати и т. д.) должен использоваться веб редактором PDF документа
        • Если веб редактор PDF документа должен использовать готовые к использованию "стандартные" 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": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "bootstrap": "5.3.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3",
    "jest-editor-support": "*",
    "run-script-os": "*"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.3",
    "@angular/cli": "^18.0.3",
    "@angular/compiler-cli": "^18.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.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.4.2"
  }
}
          • Скопируйте файлы Vintasoft.Imaging.Dialogs.Bootstrap.js, Vintasoft.Imaging.Dialogs.Bootstrap.d.ts, Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js и Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.d.ts из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "src\app\assets\".

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

        • Если веб редактор PDF документа должен использовать пользовательские "стандартные" 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": {
        "@schematics/angular:component": {
          "standalone": false
        },
        "@schematics/angular:directive": {
          "standalone": false
        },
        "@schematics/angular:pipe": {
          "standalone": false
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/angularapp1.client",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/Vintasoft.Imaging.css",
              "src/Vintasoft.Imaging.Pdf.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.Pdf.js",
              "src/app/assets/Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kB",
                  "maximumError": "4kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "angularapp1.client:build:production"
            },
            "development": {
              "buildTarget": "angularapp1.client:build:development"
            }
          },
          "defaultConfiguration": "development",
          "options": {
            "proxyConfig": "src/proxy.conf.js"
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "karmaConfig": "karma.conf.js"
          }
        }
      }
    }
  }
}

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

    11. Клиентская сторона: Создайте Angular-компонент, позволяющий просматривать, печатать, редактировать, проверять, конвертировать и сохранять PDF документ.

      • Создайте файл "pdf-document-editor-demo.html", который будет содержать HTML-разметку Angular-компонента:
        • Выберите контекстное меню "Add => New Item..." для папки "src\app\" => Появится UI-диалог "Add new item"
        • Выберите тип "HTML Page" для нового элемента
        • Установите "pdf-document-editor-demo.html" в качестве имени элемента
        • Нажмите кнопку "Добавить" => диалоговое окно будет закрыто, а файл "pdf-document-editor-demo.html" будет добавлен в папку "src\app\"

        Добавьте HTML-разметку (заголовок приложения и div-элемент для редактора PDF документа) в файл "pdf-document-editor-demo.html":


        Вот HTML-код файла "pdf-document-editor-demo.html": 
        <h1>VintaSoft PDF Document Editor Demo (Angular + ASP.NET Core)</h1>

<div id="pdfDocumentEditorContainer" style="height:800px"></div>

      • Создайте файл "pdf-document-editor-demo.css", который будет содержат CSS-стили Angular-компонента:
        • Выберите контекстное меню "Add => New Item..." для папки "src\app\" => Появится UI-диалог "Add new item"
        • Выберите тип "StyleSheet" для нового элемента
        • Установите "pdf-document-editor-demo.css" в качестве имени элемента
        • Нажмите кнопку "Добавить" => диалоговое окно будет закрыто, а файл "pdf-document-editor-demo.css" будет добавлен в папку "src\app\"

        Добавьте CSS-стили в файл "pdf-document-editor-demo.css":


        Вот CSS-код файла "pdf-document-editor-demo.css": 
        h1 {
  width: 1200px;
  text-align: center;
}

.pdfDocumentEditorContainer {
  width: 1200px;
  height: 800px;
}

      • Создайте файл "pdf-document-editor-demo.ts", который будет содержать код Angular-компонента:
        • Выберите контекстное меню "Add => New Item..." для папки "src\app\" => Появится UI-диалог "Add new item"
        • Выберите тип "TypeScript File" для нового элемента
        • Установите "pdf-document-editor-demo.ts" в качестве имени элемента
        • Нажмите кнопку "Добавить" => диалоговое окно будет закрыто, а файл "pdf-document-editor-demo.ts" будет добавлен в папку "src\app\"

        Добавьте код TypeScript в файл "pdf-document-editor-demo.ts":


        Важно: Visual Studio использует случайный сетевой порт для API ASP.NET Core, и вам необходимо обновить JavaScript-код и изменить URL-адрес веб-службы с "https://localhost:7259/" на URL-адрес в вашем приложении.

        Вот код TypeScript файла "pdf-document-editor-demo.ts": 
        import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './pdf-document-editor-demo.html',
  styleUrl: './pdf-document-editor-demo.css'
})
export class PdfDocumentEditorDemo implements OnInit {
  constructor() { }

  ngOnInit() {
    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

    // specify web services, which should be used by Vintasoft Web PDF Document Editor
    Vintasoft.Shared.WebServiceJS.defaultFileService =
      new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7259/vintasoft/api/MyVintasoftFileApi");
    Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
      new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7259/vintasoft/api/MyVintasoftImageCollectionApi");
    Vintasoft.Shared.WebServiceJS.defaultImageService =
      new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7259/vintasoft/api/MyVintasoftImageApi");
    Vintasoft.Shared.WebServiceJS.defaultPdfService =
      new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7259/vintasoft/api/MyVintasoftPdfApi");

    // create settings for PDF document editor
    let pdfDocumentEditorSettings: Vintasoft.Imaging.Pdf.UI.WebPdfDocumentEditorControlSettingsJS =
      new Vintasoft.Imaging.Pdf.UI.WebPdfDocumentEditorControlSettingsJS("pdfDocumentEditorContainer", "pdfDocumentEditor");

    // create the PDF document editor
    let pdfDocumentEditor = new Vintasoft.Imaging.Pdf.UI.WebPdfDocumentEditorControlJS(pdfDocumentEditorSettings);

    // get thumbnail viewer of PDF document editor
    let thumbnailViewer = pdfDocumentEditor.get_ThumbnailViewer();
    // specify that thumbnail viewer should not cache thumbnails on server side
    thumbnailViewer.set_UseCache(false);

    // get image viewer of PDF document editor
    let imageViewer: Vintasoft.Imaging.UI.WebImageViewerJS = pdfDocumentEditor.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");
  }

  title = 'VintaSoft Angular PDF Document Editor Demo';
}

      • Добавьте созданный Angular-компонент в модуль Angular-приложения - "src\app\app Файл .module.ts":


        Вот исходные коды файла "app.module.ts" после обновления: 
        import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { PdfDocumentEditorDemo } from './pdf-document-editor-demo';

@NgModule({
  declarations: [
    PdfDocumentEditorDemo
  ],
  imports: [
    BrowserModule, HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [PdfDocumentEditorDemo]
})
export class AppModule { }

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



     

     

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

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