Add web PDF document editor to a React and ASP.NET Core application

In This Topic

This tutorial shows how to create a blank React and ASP.NET Core application in Visual Studio .NET 2022 and add PDF document editor to a React and ASP.NET Core application.

Here are steps, which must be done:

Create a blank React and ASP.NET Core application.
- Open Visual Studio .NET 2022 and create a new application of "React and ASP.NET Core" type:
- Configure the application to use .NET 8.0:
Server side: Add references to the Vintasoft assemblies to "ReactApp1.Server" project.
Copy 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 and Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers.dll assemblies from "<SdkInstallPath>\VintaSoft Imaging .NET 14.0\Bin\DotNet8\AnyCPU\" directory to the "Bin" directory of "ReactApp1.Server" project and add references to assemblies in "ReactApp1.Server" project.
Server side: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.
If "ReactApp1.Server" project must be used in Windows or Linux, SkiaSharp drawing engine should be used.
If "ReactApp1.Server" project must be used in Windows only, System.Drawing or SkiaSharp drawing engine should be used.

Here are steps, which should be made for using SkiaSharp engine:
- Add reference to the Vintasoft.Imaging.Drawing.SkiaSharp.dll assembly.
- Add reference to the SkiaSharp nuget-package version 2.88.9.
- Open "Program.cs" file in "ReactApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.
Here are steps, which should be made for using System.Drawing engine:
- Add reference to the Vintasoft.Imaging.Gdi.dll assembly.
- Open "Program.cs" file in "ReactApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.
Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails, render image tiles, work with PDF document.
- Create web service that allows to upload/download file
  - Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
  - Select "Empty API controller" template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
  - Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class
    
    Here are source codes of MyVintasoftFileApiController class:
    C#
    
    namespace ReactApp1.Server.Controllers { public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController { public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
- Create web service that allows to manage image collection
  - Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
  - Select "Empty API controller" template, set the controller name to the "MyVintasoftImageCollectionApiController" and press the "Add" button
  - Specify that MyVintasoftImageCollectionApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController class
    
    Here are source codes of MyVintasoftImageCollectionApiController class:
    C#
    
    namespace ReactApp1.Server.Controllers { public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController { public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
- Create web service that allows to get information about images, get thumbnails, render image tiles, extract/search text
  - Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
  - Select "Empty API controller" template, set the controller name to the "MyVintasoftImageApiController" and press the "Add" button
  - Specify that MyVintasoftImageApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController class
    
    Here are source codes of MyVintasoftImageApiController class:
    C#
    
    namespace ReactApp1.Server.Controllers { public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController { public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
- Create web service that allows to work with PDF document
  - Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
  - Select "Empty API controller" template, set the controller name to the "MyVintasoftPdfApiController" and press the "Add" button
  - Specify that MyVintasoftPdfApiController class is derived from Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers.VintasoftPdfApiController class
    
    Here are source codes of MyVintasoftPdfApiController class:
    C#
    
    namespace ReactApp1.Server.Controllers { public class MyVintasoftPdfApiController : Vintasoft.Imaging.Pdf.AspNetCore.ApiControllers.VintasoftPdfApiController { public MyVintasoftPdfApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }

Server side: Create CORS-policy that allows to access web services from client side.

Open the "Program.cs" file in "ReactApp1.Server" project and add code that:

Creates CORS-policy that allows to access web services from "localhost"
Enables CORS usage in "ReactApp1.Server" project

Here are source codes of "Program.cs" file after update:

Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
builder.Services.AddControllersWithViews();

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "CorsPolicy1", policy =>
    {
        policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowAnyHeader().AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.

app.UseHttpsRedirection();

app.UseAuthorization();

app.UseCors("CorsPolicy1");

app.MapControllers();

app.MapFallbackToFile("/index.html");

app.Run();

Server side: Update launch URL in 'launchSettings.json' file.
- Open file "Properties\launchSettings.json" in "ReactApp1.Server" and clear launch URL:
Server side: Copy the default test PDF document to a server side.
- Create folder "UploadedImageFiles\SessionID" in "ReactApp1.Server" project and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in PDF document editor.
Compile the project for restoring dependencies using 'npm'.
Delete files, which are not necessary in this tutorial.
- Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "ReactApp1.Server" project - the ASP.NET Core Web API controller WeatherForecast is not necessary in this tutorial.
- Delete files "src\App.css" and "src\App.jsx" - this React-component is not necessary in this tutorial.

Client side: Add JavaScript files to the "reactapp1.client" project.

Copy Vintasoft.Shared.js, Vintasoft.Imaging.js and Vintasoft.Imaging.Pdf.js files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder into "public\" folder.
Specify, which "standard" dialogs (password dialog, print dialog, etc) should be used by web PDF document editor
- If web PDF document editor should use ready-to-use "standard" Bootstrap dialogs:
  - Add "bootstrap" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
    Here are source codes of "package.json" file after update:
    JSON
    
    { "name": "reactapp1.client", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "bootstrap": "5.3.3" }, "devDependencies": { "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.57.0", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "vite": "^5.2.0" } }
  - Copy Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder into "public\" folder.
- If web PDF document editor should use ready-to-use "standard" jQuery UI dialogs:
  - Add "jquery-ui-dist" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
  - Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
- If web PDF document editor should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.
Copy files Vintasoft.Imaging.css and Vintasoft.Imaging.Pdf.css with CSS-styles of Vintasoft web PDF document editor from "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Bin\JavaScript\" folder to the "public\" folder.

Add links to Bootstrap .css-file and Vintasoft .css-files to the "index.html" file, add references to Vintasoft JavaScript files to the header of "index.html" file:

Here are source codes of "index.html" file:

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>

    <link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="public/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="public/Vintasoft.Imaging.Pdf.css">
    <link rel="stylesheet" type="text/css" href="src/PdfDocumentEditorDemo.css">

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

Add CSS-style "pdfDocumentEditorContainer", which defines size of PDF document editor container, to the "src\PdfDocumentEditorDemo.css" file:

Here are source codes of "PdfDocumentEditorDemo.css" file:
- HTML
```
h1 {
    width: 1200px;
    text-align: center;
}

.pdfDocumentEditorContainer {
    width: 1200px;
    height: 800px;
}
```

Client side: Create React-component that allows to view, print, redact, verify, convert, save PDF document.

Create "PdfDocumentEditorDemo.jsx" file that will contain source codes of React component (PdfDocumentEditorDemo class):

Select "Add => New Item..." context menu for folder "src\" => "Add new item" dialog will appear
Select "JSX File" type for new item
Set "PdfDocumentEditorDemo.jsx" as element name
Click the "Add" button => dialog will be closed and file "PdfDocumentEditorDemo.jsx" will be added into folder "src\"

Add PdfDocumentEditorDemo class declaration with 'render' function (renders demo header and div-element that will display PDF document editor) to the "PdfDocumentEditorDemo.jsx" file:

Add 'componentDidMount' function (contains JavaScript code that initializes and creates PDF document editor) to the PdfDocumentEditorDemo class:

Important: Visual Studio uses randomized network port for ASP.NET Core API and you need to update JavaScript code and change web services URL from "https://localhost:7240/" to URL in your application.

Here is JavaScript code of "PdfDocumentEditorDemo.jsx" file:

JavaScript

import { Component } from 'react';

export class PdfDocumentEditorDemo extends Component {
    static displayName = PdfDocumentEditorDemo.name;
    static _isInitialized = false;

    render() {
        return (
            <div>
                <h1>VintaSoft PDF Document Editor Demo (ASP.NET Core + React.js)</h1>

                <div id="pdfDocumentEditorContainer" className="pdfDocumentEditorContainer"></div>
            </div>
        );
    }

    componentDidMount() {
        if (this._isInitialized)
            return;
        this._isInitialized = true;

        // declare reference to the Vintasoft namespace
        let Vintasoft = window.Vintasoft;

        // 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("https://localhost:7240/vintasoft/api/MyVintasoftFileApi");
        Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
            new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/vintasoft/api/MyVintasoftImageCollectionApi");
        Vintasoft.Shared.WebServiceJS.defaultImageService =
            new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/vintasoft/api/MyVintasoftImageApi");
        Vintasoft.Shared.WebServiceJS.defaultPdfService =
            new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/vintasoft/api/MyVintasoftPdfApi");

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

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

        // get thumbnail viewer of PDF document editor
        let thumbnailViewer = pdfDocumentEditor.get_ThumbnailViewer();
        // specify that thumbnail viewer should not cache thumbnails on server side
        thumbnailViewer.set_UseCache(false);

        // get image viewer of PDF document editor
        let imageViewer = pdfDocumentEditor.get_ImageViewer();
        // specify that image viewer should not cache image tiles on server side
        imageViewer.set_UseCache(false);
        // open file from session folder and add images from file to the image viewer
        imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
    }

}

Add created React-component to the React-application code - "src\main.jsx" file:

Here are source codes of "main.jsx" file after update:

JavaScript

import React from 'react'
import ReactDOM from 'react-dom/client'
import { PdfDocumentEditorDemo } from './PdfDocumentEditorDemo.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <PdfDocumentEditorDemo />
    </React.StrictMode>,
)

Run React and ASP.NET Core application and see the result.

Send Feedback

Create a blank React and ASP.NET Core application.

Server side: Add references to the Vintasoft assemblies to "ReactApp1.Server" project.

Server side: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails, render image tiles, work with PDF document.

Create web service that allows to upload/download file

Create web service that allows to manage image collection

Create web service that allows to get information about images, get thumbnails, render image tiles, extract/search text

Create web service that allows to work with PDF document

Server side: Create CORS-policy that allows to access web services from client side.

Server side: Update launch URL in 'launchSettings.json' file.

Server side: Copy the default test PDF document to a server side.

Compile the project for restoring dependencies using 'npm'.

Delete files, which are not necessary in this tutorial.

Client side: Add JavaScript files to the "reactapp1.client" project.

Client side: Create React-component that allows to view, print, redact, verify, convert, save PDF document.

Run React and ASP.NET Core application and see the result.