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

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

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

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

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

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

• Добавьте в проект папку "Controllers".

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

  • Нажмите правую кнопку мыши на папке "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)
            {
            }
        }
    }
    
    

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

• Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
  
• Выберите шаблон "MVC Controller - Empty", укажите имя контроллера "DefaultController" и нажмите кнопку "Add".
  
• Откройте файл "Program.cs", добавьте контроллеры с представлениями в веб сервисы ASP.NET Core приложения:
  
  
  Добавьте созданный MVC-контроллер в конечные точки ASP.NET Core приложения:
  
  
  Включите обслуживание статических файлов для текущего пути запроса ASP.NET Core приложения:
  
  
  Вот C# код файла Program.cs:
  
  • C#

  var builder = WebApplication.CreateBuilder(args);
  
  builder.Services.AddControllersWithViews();
  
  // Add services to the container.
  builder.Services.AddRazorPages();
  
  var app = builder.Build();
  
  // specify that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics
  Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
  
  // Configure the HTTP request pipeline.
  if (!app.Environment.IsDevelopment())
  {
      app.UseExceptionHandler("/Error");
      // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
      app.UseHsts();
  }
  
  app.UseHttpsRedirection();
  app.UseStaticFiles();
  
  app.UseRouting();
  
  app.UseAuthorization();
  
  app.MapRazorPages();
  
  app.MapControllerRoute("default", "{controller=Default}/{action=Index}/{id?}");
  
  app.Run();
  
  

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

• Добавьте папку "wwwroot\js\" в ASP.NET Core приложение (если папка отсутствует).
  
  
• Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Office.js и Vintasoft.Imaging.Office.css из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "wwwroot\js\".
• Добавьте библиотеки Bootstrap и jQuery в проект.
• Скопируйте файлы Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.Office.Dialogs.Bootstrap.js из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "wwwroot\js\".

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

• Создайте папку "wwwroot\UploadedImageFiles" и скопируйте в неё любой XLSX-документ. Этот документ будет отображаться в веб редакторе табличных документов.
  
  
• Откройте веб-представление - файл "Pages\Index.cshtml".
  
• Добавьте ссылки на используемые JavaScript-библиотеки:
  
  Вот HTML-код, который добавляет ссылки на Vintasoft JavaScript-файлы:
  
  • HTML

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

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

  <h1 style="text-align: center">VintaSoft Spreadsheet Editor Demo (ASP.NET Core)</h1>
  
  <div id="spreadsheetDocumentEditorControlContainer" style="width: 100%; height: calc(100% - 60px);"></div>
  

• Добавьте JavaScript код, который инициализирует и создаёт веб редактор табличного документа:
  
  Вот JavaScript-код, который инициализирует и отображает веб редактор табличного документа:
  
  • JavaScript

  <script type="text/javascript">
      function main() {
          // 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 the spreadsheet document editor control settings
          var spreadsheetDocumentEditorControlSettings = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS("spreadsheetDocumentEditorControlContainer");
  
          // create the spreadsheet document editor control
          _spreadsheetDocumentEditorControl = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);
  
          var fileId = "SalesReport.xlsx";
          // copy the file from global folder to the session folder
          Vintasoft.Imaging.VintasoftFileAPI.copyFile("UploadedImageFiles/" + fileId, __onCopyFile_success, __onCopyFile_error);
      }
  
      function __onCopyFile_success(data) {
          _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl().openDocument(data.fileId);
      }
  
      function __onCopyFile_error(data) {
          alert(data.errorMessage);
      }
  
      main();
  </script>
  
  

• Откройте веб-представление - файл "Pages\_ViewStart.cshtml" и установите значение свойства "layout" в "null". Это отключит отрисовку макета по умолчанию на странице "Index":
  

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