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

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

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

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

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

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

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



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

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

      Вот шаги, которые необходимо выполнить для использования движка SkiaSharp:
      • Добавьте ссылку на .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-графики.

      Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
      • Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Gdi.dll.
      • Откройте файл "Program.cs" в проекте "VueApp1.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 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: 
          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: 
          namespace WebApplication1.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 WebApplication1.Controllers
{
    public class MyVintasoftAnnotationCollectionApiController :
        Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController
    {

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

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

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

      • Добавьте ссылку на nuget-пакет Microsoft.AspNetCore.Mvc.NewtonsoftJson.
      • Откройте файл "Program.cs" в проекте "VueApp1.Server" и добавьте строку кода "builder.Services.AddControllersWithViews().AddNewtonsoftJson();" после строки "builder.Services.AddControllers();". Это необходимо для корректной десериализации JSON-аннотаций.

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

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

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

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

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

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

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

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

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

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

      • Удалите файлы "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" после обновления: 
        <script setup>
</script>

<template>
    <main>
    </main>
</template>

<style scoped>
</style>

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

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

      • Скопируйте файлы Vintasoft.Imaging.css и Vintasoft.Imaging.Annotation.css из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в корневую папку проекта "vueapp1.client".

      • Укажите, какие "стандартные" UI-диалоги (UI-диалог ввода пароля, UI-диалог печати и т. д.) должны использоваться веб просмотрщик документов
        • Если веб просмотрщик документов долен использовать готовые к использованию "стандартные" UI-диалоги Bootstrap:
          • Добавьте Node-модуль "bootstrap" в файл "package.json". Пересоберите проект для обновления Node-модулей.
            Вот исходные коды файла "package.json" после обновления: 
            {
  "name": "vueapp1.client",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "vite": "^5.2.8",
    "bootstrap": "5.3.3"
  }
}
          • Скопируйте файлы Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js из папки "<SdkInstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в корневую папку проекта "vueapp1.client".

        • Если веб просмотрщик документов должен использовать готовые к использованию "стандартные" 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 14.0\Bin\JavaScript" в папку "src\app\assets".

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

      • Добавьте ссылки на Vintasoft JavaScript-файлы в заголовок файла "index.html" в проекте "vueapp1.client".
        Добавьте ссылки на Vintasoft CSS-файлы в файл "index.html" в проекте "vueapp1.client".
        Добавьте ссылку на файл "bootstrap.css" в файл "index.html" в проекте "vueapp1.client".


        Вот исходные коды файла "index.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>

    <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="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.Annotation.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.Annotation.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

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

      • В проекте "vueapp1.client" в папке "src\components\" создайте файл "DocumentViewerDemo.vue", который будет содержать исходные коды Vue-компонента:
        • Выберите "Add => New Item..." контекстное меню для папки "src\components" в проекте "vueapp1.client" => появится UI-диалог "Add new item"
        • Установите шаблон "Vue TypeScript Template" из интернета, если шаблон не установлен в Visual Studio
        • Выберите тип "Vue TypeScript Template" для нового элемента
        • Установите "DocumentViewerDemo.vue" в качестве имени элемента
        • Нажмите кнопку "Add" => UI-диалог закроется и файл "DocumentViewerDemo.vue" будет добавлен в папку "src\components\"

        В файл DocumentViewerDemo.vue добавьте шаблон, который представляет заголовок приложения и div-элемент, который будет отображать веб просмотрщик документов:


        В файле DocumentViewerDemo.vue измените тип скрипта с TypeScript на JavaScript:


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


        В файле DocumentViewerDemo.vue добавьте CSS-стиль для Vue-компонента:


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

        Вот код HTML/CSS/JavaScript Vue-компонента DocumentViewerDemo: 
        <template>
    <h1>VintaSoft Document Viewer (ASP.NET Core + Vue)</h1>

    <div id="documentViewerContainer" class="documentViewerContainer"></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:7008/vintasoft/api/MyVintasoftFileApi");
            Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
                new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7008/vintasoft/api/MyVintasoftImageCollectionApi");
            Vintasoft.Shared.WebServiceJS.defaultImageService =
                new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7008/vintasoft/api/MyVintasoftImageApi");
            Vintasoft.Shared.WebServiceJS.defaultAnnotationService =
                new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7008/vintasoft/api/MyVintasoftAnnotationCollectionApi");

            // create settings for document viewer with annotation support
            let docViewerSettings =
                new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", { annotations: true });

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

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

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

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

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

<style scoped>
    h1 {
        width: 1200px;
        text-align: center;
    }

    .documentViewerContainer {
        width: 1200px;
        height: 800px;
    }
</style>

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


        Вот исходные коды файла "App.vue" после обновления: 
        <script setup>
    import DocumentViewerDemo from './components/DocumentViewerDemo.vue'
</script>

<template>
    <main>
        <DocumentViewerDemo />
    </main>
</template>

<style scoped>
</style>

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



     

     

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

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