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

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

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

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

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

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

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



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

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

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

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

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

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

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

    }
}

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

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

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

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

    5. Проект "ReactApp1.Server": Добавьте Newtonsoft JSON для десериализации JSON-аннотаций.

      • Добавьте ссылку на nuget-пакет "Microsoft.AspNetCore.Mvc.NewtonsoftJson".

      • Откройте файл "Program.cs" в проекте "ReactApp1.Server" и добавьте строку кода "builder.Services.AddControllersWithViews().AddNewtonsoftJson();" после строки "var builder = WebApplication.CreateBuilder(args);". Это необходимо для корректной десериализации JSON-аннотаций.


        Вот исходные коды файла "Program.cs" после обновления: 
        Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers().AddNewtonsoftJson();

var app = builder.Build();

app.UseDefaultFiles();
app.MapStaticAssets();

// Configure the HTTP request pipeline.

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.MapFallbackToFile("/index.html");

app.Run();

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

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

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

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

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

    9. Проект "reactapp1.client": Добавьте файлы JavaScript в проект "reactapp1.client".

      • Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.Annotation.js и Vintasoft.Imaging.DocumentViewer.js из папки "<SdkInstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" в папку "public".

      • Укажите, какие "стандартные" UI-диалоги должны спользоваться веб просмотрщиком документов
        • Если веб просмотрщик документов долен использовать готовые к использованию "стандартные" UI-диалоги Bootstrap:
          • Добавьте Node-модуль "bootstrap" в файл "package.json". Пересоберите проект для обновления Node-модулей.
            Вот исходные коды файла "package.json" после обновления: 
            {
  "name": "reactapp1.client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^5.1.1",
    "bootstrap": "~5.3.8",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
    "vite": "^7.2.4"
  }
}
          • Скопируйте файлы Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js из папки "<SdkInstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript" в папку "public".

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

        • Если веб просмотрщик документов должно использовать пользовательские "стандартные" UI-диалоги, прочтите, как создавать пользовательские "стандартные" UI-диалоги здесь .

      • Скопируйте файлы Vintasoft.Imaging.css и Vintasoft.Imaging.Annotation.css с CSS-стилями Vintasoft веб просмотрщика документов из папки "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Bin\JavaScript\" в папку "public\".

      • Добавьте ссылки на Bootstrap CSS-файл и Vintasoft CSS-файлы в файл "index.html", добавбте ссылки на Vintasoft JavaScript-файлы в заголовок файла "index.html":


        Вот исходные коды файла "index.html": 
        <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>reactapp1.client</title>

    <link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="public/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="public/Vintasoft.Imaging.Annotation.css">

    <script src="Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.Annotation.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.Annotation.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>
</html>

      • Добавьте CSS-стиль "documentViewerContainer", определяющий размер контейнера для веб просмотрщика документов, в файл "src\App.css":


        Вот исходный код файла "App.css": 
        #root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.documentViewerContainer {
    height: 800px;
}

    10. Проект "reactapp1.client": Создайте React-компонент, который позволяет отображать документ, искать и извлекать текст из документа, аннотировать документ.

      • Откройте файл "src\App.jsx" в проекте "reactapp1.client", очистите файл, код функций "App" и "__init". Функция "App" возвращает HTML-разметку (заголовок страницы и DIV-элемент для веб просмотрщика документов). Функция "__init" инициализирует приложение и создает веб просмотрщик документов.
        Вот код файла "src\App.jsx": 
        import './App.css'

function App() {
    return (
        <>
            <h1>VintaSoft Document Viewer Demo (React.js + ASP.NET Core)</h1>

            <div id="documentViewerContainer" className="documentViewerContainer"></div>

            <script>{setTimeout(__init, 10)}</script>
        </>
    )
}

/**
 * Initializes application.
 */
function __init() {
    var Vintasoft = window.Vintasoft;

    if (Vintasoft.Shared.WebImagingEnviromentJS.get_SessionId() != null)
        return;

    // 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("/vintasoft/api/MyVintasoftFileApi");
    Vintasoft.Shared.WebServiceJS.defaultImageCollectionService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftImageCollectionApi");
    Vintasoft.Shared.WebServiceJS.defaultImageService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftImageApi");
    Vintasoft.Shared.WebServiceJS.defaultAnnotationService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftAnnotationCollectionApi");

    // create settings for document viewer with annotation support
    var docViewerSettings = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", "documentViewer", true);

    // get items of document viewer
    var items = docViewerSettings.get_Items();

    // get the main menu of document viewer
    var mainMenu = items.getItemByRegisteredId("mainMenu");
    // if main menu is found
    if (mainMenu != null) {
        // get items of main menu
        var mainMenuItems = mainMenu.get_Items();

        // add "Annotation" menu panel to the main menu
        mainMenuItems.addItem("annotationsMenuPanel");
    }

    // get side panel of document viewer
    var sidePanel = items.getItemByRegisteredId("sidePanel");
    // if side panel is found
    if (sidePanel != null) {
        // get items of side panel
        var 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
    var docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);

    // create visual tool that allows to work with annotations, navigate document and select text
    var 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
    var 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
    var 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");
}

export default App



      • Откройте файл "vite.config.js" в проекте "reactapp1.client" и укажите, что приложение React.js может иметь доступ к контроллеру ASP.NET Core Web API "/vintasoft/api/" в проекте "ReactApp1.Server": 
        import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

const target = 'https://localhost:7109';

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            '^/vintasoft/api/': {
                target,
                secure: false
            }
        },
        port: 7109
    }
})

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



     

     

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

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