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

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

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

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

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

  2. Проект "VueApp1.Server": Добавьте ссылки на nuget-пакеты Vintasoft в проект "VueApp1.Server".

    Добавьте ссылки на nuget-пакеты "Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers" и "Vintasoft.Imaging.Pdf.Office" в проект "VueApp1.Server". Другие необходимые nuget-пакеты будут добавлены автоматически.



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

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

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

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

  4. Проект "VueApp1.Server": Добавьте ссылку на nuget-пакет "System.IO.Packaging".

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

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

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

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

        Вот исходные коды класса MyVintasoftFileApiController: 
        namespace VueApp1.Server.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 VueApp1.Server.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 VueApp1.Server.Controllers
{
    public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
    {

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

    }
}

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

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

        Вот исходные коды класса MyVintasoftPdfApiController: 
        namespace VueApp1.Server.Controllers
{
    public class MyVintasoftPdfApiController :
        Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers.VintasoftPdfApiController
    {

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

    }
}

  6. Проект "VueApp1.Server": Скопируйте тестовый PDF документ по умолчанию на сервер.

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

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

    • Удалите файлы "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>

  8. Скомпилируйте решение для восстановления зависимостей TypeScript в проекте "vueapp1.client".

  9. Проект "vueapp1.client": Добавьте файлы JavaScript в проект "vueapp1.client".

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

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

    • Укажите, какие "стандартные" диалоги должны использоваться веб редактором PDF документа.
      • Если веб редактор PDF документа должен использовать готовые к использованию "стандартные" UI-диалоги Bootstrap:
        • Добавьте Node-модуль "bootstrap" в файл "package.json". Пересоберите проект для обновления Node-модулей.
          Вот исходные коды файла "package.json" после обновления: 
          {
  "name": "vueapp1.client",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --cache"
  },
  "dependencies": {
    "vue": "^3.5.26"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.2",
    "@vitejs/plugin-vue": "^6.0.3",
    "bootstrap": "~5.3.8",
    "eslint": "^9.39.2",
    "eslint-plugin-vue": "~10.6.2",
    "globals": "^17.0.0",
    "vite": "^7.3.0",
    "vite-plugin-vue-devtools": "^8.0.5"
  }
}
        • Скопируйте файлы Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js из папки "<InstallPath>\VintaSoft Imaging .NET 15.2\Bin\JavaScript\" в корневую папку проекта "vueapp1.проект client.

      • Если веб редактор PDF документа должен использовать готовые к использованию "стандартные" UI-диалоги jQuery UI:
        • Добавьте Node-модуль "jquery-ui-dist" в файл "package.json". Пересоберите проект для обновления Node-модулей.
        • Скопируйте файлы Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js из папки "<InstallPath>\VintaSoft Imaging .NET 15.2\Bin\JavaScript\" в папку "src\app\assets\".

      • Если веб редактор PDF документа должен использовать пользовательские "стандартные" 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="">
<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="node_modules/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.Pdf.css">

    <script src="Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.Pdf.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

  10. Проект "vueapp1.client": Создайте компонент Vue, позволяющий просматривать, печатать, редактировать, проверять, конвертировать и сохранять PDF документ.

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

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


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


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


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


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

  <div id="pdfDocumentEditorContainer" class="pdfDocumentEditorContainer"></div>
</template>

<script lang="js">
  import { defineComponent } from 'vue';

  export default defineComponent({
    mounted() {
      setTimeout(__init, 500);
    }
  });

  function __init() {
    // 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", "pdfDocumentEditor");

    // 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 PDF document editor
    pdfDocumentEditor.openFile("VintasoftImagingDemo.pdf");
  }
</script>

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

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

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


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

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

<style scoped>
</style>

    • Откройте файл "vite.config.js" в проекте "vueapp1.client" и укажите, что приложение Vue.js может получить доступ к ASP.NET Core Web API контроллеру "/vintasoft/api/" в проекте "VueApp1.Server": 
      import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import plugin from '@vitejs/plugin-vue';
import fs from 'fs';
import path from 'path';
import child_process from 'child_process';
import { env } from 'process';

const baseFolder =
  env.APPDATA !== undefined && env.APPDATA !== ''
    ? `${env.APPDATA}/ASP.NET/https`
    : `${env.HOME}/.aspnet/https`;

const certificateName = "vueapp1.client";
const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
const keyFilePath = path.join(baseFolder, `${certificateName}.key`);

if (!fs.existsSync(baseFolder)) {
  fs.mkdirSync(baseFolder, { recursive: true });
}

if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
  if (0 !== child_process.spawnSync('dotnet', [
    'dev-certs',
    'https',
    '--export-path',
    certFilePath,
    '--format',
    'Pem',
    '--no-password',
  ], { stdio: 'inherit', }).status) {
    throw new Error("Could not create certificate.");
  }
}

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7140';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [plugin()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '^/vintasoft/api/': {
        target,
        secure: false
      },
      '^/VintasoftCache/SessionID/': {
        target,
        secure: false
      }
    },
    port: parseInt(env.DEV_SERVER_PORT || '63870'),
    https: {
      key: fs.readFileSync(keyFilePath),
      cert: fs.readFileSync(certFilePath),
    }
  }
})

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



 

 

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

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