Создайте пустое приложение "ASP.NET Core Web App (Model-View-Controller)".

Серверная сторона: Добавьте ссылки на nuget-пакеты Vintasoft в приложение ASP.NET Core.

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

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

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

Серверная сторона: Добавьте ссылку на nuget-пакеты.

• Добавьте ссылку на nuget-пакет "System.IO.Packaging" версии 10.0.0.

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

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

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

    namespace WebApplication3.Controllers
    {
        public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
        {
            public MyVintasoftFileApiController(IWebHostEnvironment hostEnvironment)
                : base(hostEnvironment)
            {
            }
        }
    }
    
    

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

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

    namespace WebApplication3.Controllers
    {
        public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
        {
            public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

Клиентская сторона: Добавьте JavaScript-библиотеки в проект.

• Добавьте папку "wwwroot\lib\Vintasoft" в приложение ASP.NET Core.
  
  
• Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Office.js, Vintasoft.Imaging.Office.css из папки "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" в папку "wwwroot\lib\Vintasoft\".
  
  
• Укажите, какие "стандартные" диалоговые окна должны использоваться веб редактором документа.
  • Если веб редактор документа должен использовать готовые к использованию "стандартные" UI-диалоги Bootstrap:
    • Добавьте библиотеки Bootstrap и jQuery в проект.
    • Скопируйте файлы Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.Office.Dialogs.Bootstrap.js из папки "<InstallPath&пt;\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" в папку "wwwroot\lib\Vintasoft\".
  • Если веб редактор документа должен использовать готовые к использованию "стандартные" UI-диалоги jQuery UI:
    • добавьте библиотеки jQuery и jQuery UI в проект;
    • Скопируйте файлы Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Office.Dialogs.jQueryUI.js из папки "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" в папку "wwwroot\lib\Vintasoft\".
  • Если веб редактор документа должен использовать пользовательские "стандартные" диалоги, пожалуйста, ознакомьтесь с инструкцией по созданию пользовательских "стандартных" диалогов. здесь .

Клиентская сторона: Добавьте JavaScript код, который позволяет отображать табличные документы.

• Создайте папку "wwwroot\UploadedImageFiles\SessionID" и скопируйте в нее любой DOCX документ. Этот документ будет отображаться в веб редакторе документа.
  
  
• Откройте файл "Views\Home\Index.cshtml".
  
  
  
  Добавьте ссылки на используемые JavaScript-библиотеки:
  • Если вы используете диалоговые окна Bootstrap, добавьте ссылки на файлы Bootstrap и Vintasoft JavaScript-файлы.
    Вот HTML-код, который добавляет ссылки на файлы Bootstrap и Vintasoft JavaScript-файлы:
    
    • HTML

    <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.Office.css">
    
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" type="text/javascript"></script>
    
    <script src="~/lib/Vintasoft/Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Office.Dialogs.Bootstrap.js" type="text/javascript"></script>
    
    

    
    
  • Если вы используете диалоговые окна jQuery UI, добавьте ссылки на jQuery-файлы и Vintasoft JavaScript-файлы.
    Вот HTML-код, который добавляет ссылки на jQuery-файлы и Vintasoft JavaScript-файлы:
    
    • HTML

    <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.Office.css">
    
    <script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="~/js/jquery-ui.min.js" type="text/javascript"></script>
    
    <script src="~/lib/Vintasoft/Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Office.Dialogs.jQueryUI.js" type="text/javascript"></script>
    
    

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

  <div class="text-center">
      <h1>VintaSoft Document Editor Demo (ASP.NET Core)</h1>
  
      <div id="documentEditorContainer" class="documentEditorContainer"></div>
  </div>
  

  
  
• Откройте файл "wwwroot\css\site.css", добавьте CSS-стиль для "documentEditorContainer" в файл "site.css":
  • HTML

  html {
    font-size: 14px;
  }
  
  @media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }
  
  .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
  }
  
  html {
    position: relative;
    min-height: 100%;
  }
  
  body {
    margin-bottom: 60px;
  }
  
  .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
  }
  
  .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
  }
  
  .documentEditorContainer {
      height: 800px;
  }
  
  

  
  
  
• Откройте файл "wwwroot\js\site.js", добавьте JavaScript-код, который инициализирует и создает веб редактор документа:
  
  Вот JavaScript-код, который инициализирует и отображает веб редактор документа:
  
  • JavaScript

  // set the session identifier
  Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
  
  // specify web services, which should be used in this demo
  _fileService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftFileApi");
  Vintasoft.Shared.WebServiceJS.defaultFileService = _fileService;
  Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftOfficeApi");
  
  // create web document editor settings
  var documentEditorSettings = new Vintasoft.Imaging.Office.UI.WebDocumentEditorSettingsJS("documentEditorContainer");
  
  // create web document editor
  var documentEditor = new Vintasoft.Imaging.Office.UI.WebDocumentEditorJS(documentEditorSettings);
  
  // open DOCX document
  documentEditor.openDocument("DocxTestDocument.docx");
  
  

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