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


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

      Откройте Visual Studio .NET 2019, создайте новый проект типа "ASP.NET Web Application" и настройте его для использования .NET Framework 4.7.2:

      Выберите шаблон "Empty" для ASP.NET веб-приложения и настройте проект для использования WebForms:

    2. На стороне сервера: Добавьте ссылки на .NET-сборки Vintasoft в ASP.NET WebForms приложение.

      Добавьте ссылки на .NET-сборки Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Annotation.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Imaging.Office.OpenXml.dll, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll, Vintasoft.Imaging.Annotation.Web.Services.dll, Vintasoft.Imaging.Web.Handlers.dll и Vintasoft.Imaging.Annotation.Web.Handlers.dll из папки "<SdkInstallPath>\VintaSoft Imaging .NET v12.5\Bin\DotNet4\AnyCPU\" в ASP.NET WebForms приложение.



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

      Приложение ASP.NET WebForms должно использовать библиотеку System.Drawing в качестве графического движка, поскольку приложение ASP.NET WebForms может использоваться только в Windows.

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

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

      • Добавьте папку "Handlers" в приложение ASP.NET WebForms.
      • Создайте веб сервис, позволяющий загружать/скачивать файл

        • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
        • Укажите имя обработчика "MyVintasoftFileHandler" и нажмите кнопку "Ok".
        • Укажите, что класс MyVintasoftFileHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftFileHandler.

          Вот C# код класса MyVintasoftFileHandler:
          namespace WebApplication1.Handlers
          {
              public class MyVintasoftFileHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler
              {
              }
          }
          
          
      • Создайте веб сервис, позволяющий управлять коллекцией изображений

        • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
        • Укажите имя обработчика "MyVintasoftImageCollectionHandler" и нажмите кнопку "Ok".
        • Укажите, что класс MyVintasoftImageCollectionHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftImageCollectionHandler.

          Вот C# код класса MyVintasoftImageCollectionHandler:
          namespace WebApplication1.Handlers
          {
              public class MyVintasoftImageCollectionHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftImageCollectionHandler
              {
              }
          }
          
          
      • Создайте веб сервис, который позволяет получать информацию об изображениях, получать миниатюры, рендерить тайлы изображений, извлекать/искать текст

        • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
        • Укажите имя обработчика "MyVintasoftImageHandler" и нажмите кнопку "Ok".
        • Укажите, что класс MyVintasoftImageHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftImageHandler.

          Вот C# код класса MyVintasoftImageHandler:
          namespace WebApplication1.Handlers
          {
              public class MyVintasoftImageHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftImageHandler
              {
              }
          }
          
          
      • Создайте веб сервис, который позволяет комментировать изображения и документы

        • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
        • Укажите имя обработчика "MyVintasoftAnnotationCollectionHandler" и нажмите кнопку "Ok".
        • Укажите, что класс MyVintasoftAnnotationCollectionHandler наследуется от класса VintasoftImaging.Annotation.Web.HttpHandlers.VintasoftAnnotationCollectionHandler.

          Вот C# код класса MyVintasoftFileHandler:
          namespace WebApplication1.Handlers
          {
              public class MyVintasoftAnnotationCollectionHandler :
                  Vintasoft.Imaging.Annotation.Web.HttpHandlers.VintasoftAnnotationCollectionHandler
              {
              }
          }
          
          
    5. На стороне клиента: Добавьте JavaScript-библиотеки в проект.

      • Добавьте папку "Scripts\" в приложение ASP.NET WebForms (если папка отсутствует).

      • Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.Annotation.js, Vintasoft.Imaging.DocumentViewer.js и Vintasoft.Imaging.DocumentViewer.css из папки "\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" в папку "Scripts\".

      • Укажите, какие "стандартные" UI-диалоги (UI-диалог ввода пароля, UI-диалог печати и т. д.) должны использоваться веб просмотрщик документов
        • Если веб просмотрщик документов должен использовать готовые к использованию "стандартные" UI-диалоги jQuery UI:
          • Скопируйте файл jQuery в папку "Scripts\".
            Вы можете использовать файл "jquery-3.3.1.min.js" из папки "\VintaSoft Imaging .NET v12.5\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" или файл jQuery из любого другого источника.
          • Скопируйте файлы и папки jQuery UI в папку "Scripts\".
            Вы можете использовать файл "jquery-ui.min.js" и папку "jquery-ui-css" из папки "\VintaSoft Imaging .NET v12.5\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" или файлы и папки jQuery UI из любого другого источника.
          • Скопируйте файлы Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js из папки "\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" folder into "Scripts\".

        • Если веб просмотрщик документов должен использовать пользовательские "стандартные" UI-диалоги, прочтите, как создавать пользовательские "стандартные" UI-диалоги здесь .
    6. На стороне клиента: Добавьте JavaScript-код, который инициализирует и отображает веб просмотрщик документов, в веб-форму "Default".

      • Создайте папку "UploadedImageFiles\SessionID" и скопируйте PDF документ "VintaSoft\Imaging .NET v12.5\Images\VintasoftImagingDemo.pdf" в созданную папку. Этот документ будет отображаться в веб просмотрщике документов.

      • Создайте веб-форму "Default" - файл "Default.aspx".
        • Щёлкните правой кнопкой мыши по проекту и выберите в контекстном меню пункт "Add => WebForm":


        • Укажите "Default" в качестве имени веб-формы => откроется созданная веб-форма:

      • Добавьте ссылки на JavaScript-файлы:

        Вот HTML-код, который добавляет ссылки на файлы jQuery и JavaScript-файлы Vintasoft:
        <link rel="stylesheet" type="text/css" href="Scripts/jquery-ui-css/jquery-ui.min.css">
        <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.DocumentViewer.css">
        
        <script src="Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
        
        <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
        <script src="Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
        <script src="Scripts/Vintasoft.Imaging.Annotation.js" type="text/javascript"></script>
        <script src="Scripts/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
        <script src="Scripts/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js" type="text/javascript"></script>
        
        


      • Добавьте в веб-представление HTML-разметку (div-элемент, который будет отображать веб просмотрщик документов):

        Вот код HTML-разметки:
        <h1 style="text-align: center">VintaSoft Document Viewer Demo (ASP.NET WebForms)</h1>
        <div id="documentViewerContainer" style="height: 800px"></div>
        
        


      • Добавьте JavaScript-код, который отображает веб просмотрщик документов:

        Вот JavaScript-код (с разметкой страницы), который отображает веб просмотрщик документов:
        <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
        
        <!DOCTYPE html>
        
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title>VintaSoft Document Viewer Demo (ASP.NET WebForms)</title>
        
            <style>
                * {
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border-collapse: collapse;
                }
            </style>
        
            <link rel="stylesheet" type="text/css" href="Scripts/jquery-ui-css/jquery-ui.min.css">
            <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.DocumentViewer.css">
        
            <script src="Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
            <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
        
            <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
            <script src="Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
            <script src="Scripts/Vintasoft.Imaging.Annotation.js" type="text/javascript"></script>
            <script src="Scripts/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
            <script src="Scripts/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js" type="text/javascript"></script>
        </head>
        <body>
            <form id="form1" runat="server">
                <h1 style="text-align: center">VintaSoft Document Viewer Demo (ASP.NET WebForms)</h1>
                <div id="documentViewerContainer" style="height: 800px"></div>
            </form>
        
            <script type="text/javascript">
                // 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.WebServiceHandlerJS("/Handlers/MyVintasoftFileHandler.ashx");
                Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
                    new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftImageCollectionHandler.ashx");
                Vintasoft.Shared.WebServiceJS.defaultImageService =
                    new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftImageHandler.ashx");
                Vintasoft.Shared.WebServiceJS.defaultAnnotationService =
                    new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftAnnotationCollectionHandler.ashx");
        
                // create settings for document viewer with annotation support
                let docViewerSettings =
                    new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", { annotations: 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
                    let 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 image viewer of document viewer
                var imageViewer = docViewer.get_ImageViewer();
                // open file from session folder and add images from file to the image viewer
                imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
            </script>
        </body>
        </html>
        
    7. Запустите ASP.NET WebForms приложение и посмотрите результат.