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

• Откройте Visual Studio .NET 2022 и создайте новое приложение типа "Vue и ASP.NET Core":
  
  
• Настройте приложение для использования .NET 8.0:
  

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

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

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

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

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

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

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

    namespace WebApplication1.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:
    
    • C#

    namespace WebApplication1.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:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
        {
    
            public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

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

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

  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();
  
  

Серверная сторона: Обновите стартовый URL-адрес приложения в файле "launchSettings.json".

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

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

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

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

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

• Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" в проекте "VueApp1.Server" - ASP.NET Web API контроллер WeatherForecast не требуется в этом руководстве.
  
  
• Удалите файлы "src\components\TheWelcome.vue", "src\components\WelcomeItem.vue" в проекте "vueapp1.client" - этот Vue-компонент не требуется в этом руководстве.
  
  
• Откройте файл "src\App.vue" в проекте "vueapp1.client" и удалите код, который использует следующие Vue-компоненты: HelloWorld, TheWelcome - эти Vue-компоненты не нужны в этом руководстве.
  Вот исходные коды файла "App.vue" после обновления:
  
  • JavaScript

  <script setup>
  </script>
  
  <template>
      <main>
      </main>
  </template>
  
  <style scoped>
  </style>
  
  

Клиентская сторона: Добавьте файлы JavaScript в проект "vueapp1.client".

• Скопируйте файлы Vintasoft.Shared.js и Vintasoft.Imaging.js из папки "<SdkInstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в корневую папку проекта "vueapp1.client".
  
  
• Добавьте ссылки на Vintasoft JavaScript-файлы в заголовок файла "index.html" в проекте "vueapp1.client".
  
  
  Вот исходные коды файла "index.html" после обновления:
  
  • HTML

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <link rel="icon" href="/favicon.ico">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vite App</title>
  
      <script src="Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.js" type="text/javascript"></script>
  </head>
  <body>
      <div id="app"></div>
      <script type="module" src="/src/main.js"></script>
  </body>
  </html>
  
  

Клиентская сторона: Создайте Vue-компонент, который отображает веб просмотрщик изображений.

• В проекте "vueapp1.client" в папке "src\components\" создайте файл "ImageViewerDemo.vue", который будет содержать исходные коды Vue-компонента:
  • Выберите "Add => New Item..." контекстное меню для папки "src\components" в проекте "vueapp1.client" => появится UI-диалог "Add new item"
  • Установите шаблон "Vue TypeScript Template" из интернета, если шаблон не установлен в Visual Studio
  • Выберите тип "Vue TypeScript Template" для нового элемента
  • Установите "ImageViewerDemo.vue" в качестве имени элемента
  • Нажмите кнопку "Add" => UI-диалог закроется и файл "ImageViewerDemo.vue" будет добавлен в папку "src\components\"
  
  В файле "ImageViewerDemo.vue" добавьте шаблон, который представляет заголовок приложения и div-элемент, который будет отображать веб просмотрщик изображений:
  
  
  В файле "ImageViewerDemo.vue" измените тип скрипта с TypeScript на JavaScript:
  
  
  В файле "ImageViewerDemo.vue" добавьте функцию "mounted" (содержит JavaScript-код, который инициализирует и создает веб просмотрщик изображений):
  
  
  В файле "ImageViewerDemo.vue" добавьте CSS-стиль для Vue-компонента:
  
  
  Важно: Visual Studio использует случайный сетевой порт для ASP.NET Core API, и вам необходимо обновить JavaScript-код и измените URL-адрес веб-службы с "https://localhost:7113/" на URL-адрес в вашем приложении.
  
  Вот HTML/CSS/JavaScript-код Vue-компонента ImageViewerDemo:
  
  • JavaScript

  <template>
      <h1>VintaSoft Image Viewer Demo (ASP.NET Core + Vue)</h1>
  
      <div class="imageViewerDemoContainer">
          <div id="WebThumbnailViewer1Div" class="thumbnailViewerContainer"></div>
          <div id="WebImageViewer1Div" class="imageViewerContainer"></div>
      </div>
  </template>
  
  <script lang="js">
      import { defineComponent } from 'vue';
  
      export default defineComponent({
          mounted() {
              // 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:7113/vintasoft/api/MyVintasoftFileApi");
              Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
                  new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7113/vintasoft/api/MyVintasoftImageCollectionApi");
              Vintasoft.Shared.WebServiceJS.defaultImageService =
                  new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7113/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");
          }
      });
  </script>
  
  <style>
      h1 {
          width: 1200px;
          text-align: center;
      }
  
      .imageViewerDemoContainer {
          display: flex;
      }
  
      .thumbnailViewerContainer {
          width: 200px;
          height: 800px;
      }
  
      .imageViewerContainer {
          width: 1200px;
          height: 800px;
      }
  </style>
  
  

  
  
• Добавьте созданный Vue-компонент в код Vue-приложения - файл "src\App.vue".
  
  
  Вот исходные коды файла "App.vue" после обновления:
  
  • JavaScript

  <script setup>import ImageViewerDemo from './components/ImageViewerDemo.vue'</script>
  
  <template>
    <main>
        <ImageViewerDemo />
    </main>
  </template>
  
  <style scoped>
  </style>
  
  

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