VintaSoft Imaging .NET SDK 14.0: Документация для Веб разработчика
В этом разделе
    Добавление веб редактора PDF документа в приложение ASP.NET Core
    В этом разделе
    В этом руководстве показано, как создать пустое ASP.NET Core веб-приложение в Visual Studio .NET 2022 и добавить редактор PDF документа в приложение ASP.NET Core.

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

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

      Откройте Visual Studio .NET 2022 и создайте новый проект типа "ASP.NET Core Web Application":

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

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

      Скопируйте сборки Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll, Vintasoft.Imaging.Pdf.Web.Services.dll, Vintasoft.Imaging.AspNetCore.ApiControllers.dll и Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers.dll из каталога "\VintaSoft Imaging .NET 14.0\Bin\DotNet8\AnyCPU\" в каталог "Bin" веб-приложения ASP.NET Core и добавьте ссылки на сборки в веб-приложении ASP.NET Core.



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

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

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

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

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

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

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

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

          Вот исходные коды класса MyVintasoftFileApiController: 
          using Microsoft.AspNetCore.Hosting;

namespace WebApplication1.Controllers
{
    public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
    {

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

    }
}

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

        • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
        • Выберите шаблон "API Controller - Empty", нажмите кнопку "Add" кнопку, задайте имя контроллера "MyVintasoftImageCollectionApiController" и нажмите кнопку "Добавить"
        • Укажите, что класс MyVintasoftImageCollectionApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController

          Вот исходные коды класса MyVintasoftImageCollectionApiController: 
          using Microsoft.AspNetCore.Hosting;

namespace WebApplication1.Controllers
{
    public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController
    {

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

    }
}

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

        • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
        • Выберите шаблон "API Controller - Empty", нажмите кнопку "Добавить", задайте имя контроллера "MyVintasoftImageApiController" и нажмите кнопку "Добавить"
        • Укажите, что класс MyVintasoftImageApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController

          Вот исходные коды класса MyVintasoftImageApiController: 
          using Microsoft.AspNetCore.Hosting;

namespace WebApplication1.Controllers
{
    public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
    {

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

    }
}

      • Создайте веб-сервис, позволяющий работать с PDF документом

        • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
        • Выберите шаблон "API Controller - Empty", нажмите кнопку "Добавить", задайте имя контроллера "MyVintasoftPdfApiController" и нажмите кнопку "Добавить"
        • Укажите, что класс MyVintasoftPdfApiController является производным от класса Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers.VintasoftPdfApiController

          Вот исходные коды класса MyVintasoftPdfApiController: 
          using Microsoft.AspNetCore.Hosting;

namespace WebApplication1.Controllers
{
    public class MyVintasoftPdfApiController :
        Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers.VintasoftPdfApiController
    {

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

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

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


        Добавьте созданный MVC-контроллер в конечные точки ASP.NET Core приложения:


        Включите обслуживание статических файлов для текущего пути запроса ASP.NET Core приложения:


        Вот C# код файла Startup.cs: 
        using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace WebApplication1
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            // specify that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics
            Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();

            // add Newtonsoft JSON for deserialization of JSON annotations
            services.AddControllersWithViews().AddNewtonsoftJson();

            services.AddRazorPages();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                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.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute("default", "{controller=Default}/{action=Index}/{id?}");
            });
        }
    }
}

    6. Клиентская сторона: Создайте веб представление для отображения редактора PDF документа.

      • Откройте файл "DefaultController.cs", щёлкните правой кнопкой мыши по методу "Index" класса DefaultController и выберите в контекстном меню пункт "Add View...".
      • Выберите шаблон "Razor View - Empty", нажмите кнопку "Добавить", задайте имя представления "Index" и нажмите кнопку "Добавить" => Будет создан файл "Views\Default\Index.cshtml"

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

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

      • Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.Pdf.js, Vintasoft.Imaging.css и Vintasoft.Imaging.Pdf.css из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "wwwroot\js\".
      • Укажите, какие "стандартные" UI-диалоги (диалог ввода пароля, диалог печати и т. д.) должны использоваться веб редактором PDF документа
        • Если веб редактор PDF документа должен использовать готовые к использованию "стандартные" UI-диалоги Bootstrap:
          • Добавьте библиотеки Bootstrap и jQuery в проект.
          • Скопируйте файлы Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "wwwroot\js\".
        • Если веб редактор PDF документа должен использовать готовые к использованию "стандартные" UI-диалоги jQuery UI:
          • добавьте библиотеки jQuery и jQuery UI в проект;
          • Скопируйте файлы Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "wwwroot\js\".
        • Если веб редактор PDF документа должен использовать пользовательские "стандартные" UI-диалоги, прочтите, как создать пользовательские "стандартные" UI-диалоги здесь .

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

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

      • Откройте веб-представление - файл "Views\Default\Index.cshtml".
      • Добавьте ссылки на используемые JavaScript-библиотеки:
        • Если вы используете диалоговые окна Bootstrap, добавьте ссылки на файлы Bootstrap и Vintasoft JavaScript-файлы.
          Вот HTML-код, который добавляет ссылки на файлы Bootstrap и Vintasoft JavaScript-файлы: 
          <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
<link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Pdf.css">

<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>

<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.Pdf.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js" type="text/javascript"></script>

        • Если вы используете диалоговые окна jQuery UI, добавьте ссылки на jQuery-файлы и Vintasoft JavaScript-файлы.
          Вот HTML-код, который добавляет ссылки на jQuery-файлы и Vintasoft JavaScript-файлы: 
          <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
<link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Pdf.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="~/js/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.Pdf.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js" type="text/javascript"></script>

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

        Вот код HTML-разметки: 
        <h1 style="text-align: center">VintaSoft PDF Document Editor Demo (ASP.NET Core)</h1>

<div id="pdfDocumentEditorContainer" style="height:800px"></div>
      • Добавьте код JavaScript, который инициализирует и создает редактор PDF документа:

        Вот код JavaScript, который инициализирует и отображает редактор PDF документа: 
        @{
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>VintaSoft PDF Document Editor Demo (ASP.NET Core)</title>

    <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Pdf.css">

    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>

    <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.Pdf.js" type="text/javascript"></script>
    <script src="~/js/Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js" type="text/javascript"></script>
</head>

<body>
    <h1 style="text-align: center">VintaSoft PDF Document Editor Demo (ASP.NET Core)</h1>

    <div id="pdfDocumentEditorContainer" style="height:800px"></div>

    <script type="text/javascript">
        // set the session identifier
        Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

        // specify web services, which should be used by Vintasoft Web PDF Document Editor
        Vintasoft.Shared.WebServiceJS.defaultFileService =
            new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftFileApi");
        Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
            new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageCollectionApi");
        Vintasoft.Shared.WebServiceJS.defaultImageService =
            new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageApi");
        Vintasoft.Shared.WebServiceJS.defaultPdfService =
            new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftPdfApi");

        // create settings for PDF document editor
        var pdfDocumentEditorSettings =
            new Vintasoft.Imaging.Pdf.UI.WebPdfDocumentEditorControlSettingsJS("pdfDocumentEditorContainer");

        // create the PDF document editor
        var pdfDocumentEditor = new Vintasoft.Imaging.Pdf.UI.WebPdfDocumentEditorControlJS(pdfDocumentEditorSettings);

        // open file from session folder and add images from file to the image viewer
        pdfDocumentEditor.openFile("VintasoftImagingDemo.pdf");
    </script>
</body>
</html>

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



     

     

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

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