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

    Вот шаги, которые необходимо выполнить:
    1. Создайте пустое "React + ASP.NET Core" приложение.

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

      • Настройте приложение для использования .NET 8.0:
    2. Серверная часть: Добавьте ссылки на .NET-сборки Vintasoft в проект "ReactApp1.Server".

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


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

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

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

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

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

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

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

          Вот исходные коды класса MyVintasoftFileApiController:
          namespace ReactApp1.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 ReactApp1.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 ReactApp1.Server.Controllers
          {
              public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
              {
          
                  public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
    5. Серверная сторона: Создайте CORS-политику, позволяющую получать доступ к веб сервисам из клиентского приложения.

      • Откройте файл "Program.cs" в проекте "ReactApp1.Server" и добавьте код, который:
        • Создает CORS-политику, которая позволяет получать доступ к веб сервисам с веб сервера "localhost"
        • Включает использование CORS в проекте "ReactApp1.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" в "ReactApp1.Server" и очистите стартовый URL-адрес приложения:
    7. Сторона сервера: Скопируйте тестовый PDF документ по умолчанию на сторону сервера.

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

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

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

      • Удалите файлы "src\App.css" и "src\App.jsx" - этот React-компонент не требуется в этом руководстве.
    10. Клиентская сторона: Добавьте JavaScript-файлы в проект "reactapp1.client".

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

      • Добавьте ссылки на 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>Vite + React</title>
        
            <link rel="stylesheet" type="text/css" href="src/ImageViewerDemo.css">
        
            <script src="public/Vintasoft.Shared.js" type="text/javascript"></script>
            <script src="public/Vintasoft.Imaging.js" type="text/javascript"></script>
        </head>
          <body>
            <div id="root"></div>
            <script type="module" src="/src/main.jsx"></script>
          </body>
        </html>
        
        

      • Добавьте CSS-стили для этого приложения в файл "src\ImageViewerDemo.css" :


        Вот исходные коды файла "ImageViewerDemo.css":
        h1 {
            width: 1200px;
            text-align: center;
        }
        
        .imageViewerDemoContainer {
            display: flex;
        }
        
        .thumbnailViewerContainer {
            width: 200px;
            height: 800px;
        }
        
        .imageViewerContainer {
            width: 1200px;
            height: 800px;
        }
        
        
    11. Клиентская сторона: Создайте React-компонент, который отображает веб просмотрщик изображений.

      • Создайте файл "ImageViewerDemo.jsx", который будет содержать исходные коды React-компонента (класс ImageViewerDemo):
        • Выберите контекстное меню "Add => New Item..." для папкb "src\" => Появится UI-диалог "Add new item"
        • Выберите тип "JSX-файл" для нового элемента
        • Установите "ImageViewerDemo.jsx" в качестве имени элемента
        • Нажмите кнопку "Add" => UI-диалог закроется и файл "ImageViewerDemo.jsx" будет добавлен в папку "src\"

        Добавьте объявление класса ImageViewerDemo с функцией "render" (отображает заголовок приложения, div-элемент для веб просмотрщика изображений, div-элемент для веб просмотрщика миниатюр) в файл "ImageViewerDemo.jsx":


        Добавьте функцию "componentDidMount" (содержит JavaScript-код, который инициализирует и создает веб просмотрщик изображений) в класс ImageViewerDemo:


        Вот исходные коды файла "ImageViewerDemo.jsx":
        import { Component } from 'react';
        
        export class ImageViewerDemo extends Component {
            static displayName = ImageViewerDemo.name;
            static _isInitialized = false;
        
            render() {
                return (
                    <div>
                        <h1>VintaSoft Image Viewer Demo (React + ASP.NET Core)</h1>
        
                        <div className="imageViewerDemoContainer">
                            <div id="WebThumbnailViewer1Div" className="thumbnailViewerContainer"></div>
                            <div id="WebImageViewer1Div" className="imageViewerContainer"></div>
                        </div>
                    </div>
                );
            }
        
            componentDidMount() {
                if (this._isInitialized)
                    return;
                this._isInitialized = true;
        
                var Vintasoft = window.Vintasoft;
        
                // 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("https://localhost:7240/vintasoft/api/MyVintasoftFileApi");
                Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
                    new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/vintasoft/api/MyVintasoftImageCollectionApi");
                Vintasoft.Shared.WebServiceJS.defaultImageService =
                    new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/vintasoft/api/MyVintasoftImageApi");
        
                // create thumbnail viewer
                let thumbnailViewer = new Vintasoft.Imaging.UI.WebThumbnailViewerJS("WebThumbnailViewer1Div");
                // specify that thumbnail viewer should not cache thumbnails on server side
                thumbnailViewer.set_UseCache(false);
        
                // create image viewer
                let imageViewer = new Vintasoft.Imaging.UI.WebImageViewerJS("WebImageViewer1Div");
                // specify that image viewer should not cache image tiles on server side
                imageViewer.set_UseCache(false);
        
                // specify that image viewer depends from thumbnail viewer
                imageViewer.set_MasterViewer(thumbnailViewer);
        
                // open file from session folder and add images from file to the image viewer
                imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
            }
        
        }
        

      • Добавьте созданный React-компонент в код React-приложения - "src\main .jsx-файл.


        Вот исходные коды файла "main.jsx" после обновления:
        import React from 'react'
        import ReactDOM from 'react-dom/client'
        import { ImageViewerDemo } from './ImageViewerDemo.jsx'
        import './index.css'
        
        ReactDOM.createRoot(document.getElementById('root')).render(
            <React.StrictMode>
                <ImageViewerDemo />
            </React.StrictMode>,
        )
        
        
    12. Запустите "React + ASP.NET Core" приложение и посмотрите результат.