Documents for PDF .NET Edition
GrapeCity Documents PDF Viewer / Configure GcDocs PDF Viewer / Edit PDF
In This Topic
    Edit PDF
    In This Topic

    When connected to a server running GcPdf (using the SupportApi property, see below), GcDocs PDF Viewer allows you to edit PDF documents by using the general editing options, Annotation and Form Editor tools.

    To configure GcDocs PDF Viewer to edit PDF documents, the SupportApi controller is connected to GrapeCity Documents for PDF (GcPdf) on server, which enables the PDF editing operations and save PDF documents on client. The GcDocs PDF Viewer works with server-side API, that is, GcPdf via SupportApi property to save the modified changes and sends the PDF back to the client.

    The SupportApi controller can be used by downloading and unzipping the GcPDF distribution file. It contains a GcPdfViewerWeb folder which further contains:

    How editing works in GcDocs PDF Viewer

    1. A PDF is loaded into the GcDocs PDF Viewer in one of the following ways:
      • Using GcPdf
      • Using Open button or Ctrl-O shortcut
      • Creating new PDF using the New button
    2. Edits are done in the PDF by using general editing features or editing tools. At this point, all edits are stored locally by the viewer.
    3. After pressing the 'save' button, the original PDF and edits are sent to the server via SupportApi.
    4. The server applies edits to the sent file and sends the modified PDF back to the client.
    5. The modified PDF can be saved locally, or opened in any PDF Reader or similar.
    Note: The edits or changes are NOT persisted by the server, they are applied to the PDF and the modified PDF is sent back.

    The steps listed below describe how to configure GcDocs PDF Viewer in an ASP.NET Core Web Application to view and edit PDF Files.

     

    1. Open Microsoft Visual Studio and select Create a new projectASP.NET Core Web Application. Next, in 'Configure your new project' dialog, uncheck the 'Place solution and the project in the same directory' checkbox to keep SupportApi and sample project side by side.
      New project dialog

    2. In the 'Create a new ASP.NET Core web application' dialog, select the following:
      • .NET Core / ASP.NET Core 3.1
      • 'Web Application' - Project template
        Note: Make sure that 'Configure for HTTPS' option is unchecked to avoid warnings shown by FireFox on Windows.
        Create a new ASP.NET Core web application dialog
    3. Make sure that sample project builds and runs fine (shows the 'Welcome' screen in browser). Next steps assume that the project is named as 'WebApplication2'.

    4. Run the following command to install GcDocs PDF Viewer. Make sure that the directory location in command prompt is set to lib folder. The GcDocs PDF Viewer will be installed in WebApplication2\WebApplication2\wwwroot\lib:       

      npm install @grapecity/gcpdfviewer

    5. Get the SupportApi (from GcPdf Distribution zip or from GcPdfViewer Sample zip) and copy 'SupportApi' into WebApplication2\SupportApi as shown below:
      File Explorer

    6. Add the SupportApi project to WebApplication2 solution. Right click the solution, Add | Existing Project and then select WebApplication2\SupportApi\SupportApi.csproj
      Solution Explorer

    7. Modify the default content of WebApplication2\WebApplication2\Pages\Index.cshtml with the following code:
      Index.cshtml
      Copy Code
      @page
      @model IndexModel
      @{ ViewData["Title"] = "Home page"; }
      <style>
          .container {
              height: calc(100% - 128px);
              max-width: inherit;
          }
      
          #host, .pb-3 {
              height: 100%;
          }
      </style>
      <div id="host"></div>
      <script src="~/lib/node_modules/@@grapecity/gcpdfviewer/gcpdfviewer.js" asp-append-version="true"></script>
      <script>
          var viewer = new GcPdfViewer("#host", { supportApi: 'api/pdf-viewer' });
          viewer.addDefaultPanels();
          viewer.addAnnotationEditorPanel();
          viewer.addFormEditorPanel();
          viewer.beforeUnloadConfirmation = true;
          viewer.newDocument();
      </script>
      

    8. In WebApplication2 project, Right click the Dependencies | Add Project Reference to SupportApi.csproj
      Folder structure

    9. Create a 'Controllers' folder in WebApplication2 project and add a class file 'SupportApiController.cs' to it as shown below:
      Controllers folder

    10. Modify Startup.cs by adding the following lines of code to default ConfigureServices() method:                       
      services.AddMvc((opts) => { opts.EnableEndpointRouting = false; });
      services.AddRouting();

      and following line of code to Configure() method:
      app.UseMvcWithDefaultRoute();
      

      The final startup.cs will look like below:
      Startup.cs
      Copy Code
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Threading.Tasks;
      using Microsoft.AspNetCore.Builder;
      using Microsoft.AspNetCore.Hosting;
      using Microsoft.Extensions.Configuration;
      using Microsoft.Extensions.DependencyInjection;
      using Microsoft.Extensions.Hosting;
      
      namespace WebApplication2
      {
          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)
              {
                  services.AddRazorPages();
                  // Enable routing:
                  services.AddMvc((opts) => { opts.EnableEndpointRouting = false; });
                  services.AddRouting();
              }
      
              // 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");
                  }
                  app.UseStaticFiles();
                  app.UseRouting();
                  app.UseAuthorization();
                  app.UseEndpoints(endpoints =>
                  {
                      endpoints.MapRazorPages();
                  });
                  // Enable routing:
                  app.UseMvcWithDefaultRoute();
              }
          }
      }
      

    11. Replace the code in 'SupportApiController.cs' with below code snippet:
      SupportApiController.cs
      Copy Code
      using GcPdfViewerSupportApi.Controllers;
      using Microsoft.AspNetCore.Mvc;
      namespace WebApplication2
      {
          [Route("api/pdf-viewer")]
          [ApiController]
          public class SupportApiController : GcPdfViewerController
          {
      
          }
      }
      

    12. Build and run the application to view GcDocs PDF Viewer in your browser which contains the annotation and form editor tools to edit PDF documents.

      GcDocs PDF Viewer

    The steps listed below describe how to configure GcDocs PDF Viewer in an ASP.NET WebForms Application to view and edit PDF Files.

    1. Open Microsoft Visual Studio and select Create a new project | ASP.NET Web Application (.NET Framework).
      New project dialog

    2. In 'Configure your new project' dialog, name the project and select '.NET Framework 4.7.2' framework. Uncheck the 'Place solution and the project in the same directory' checkbox to keep SupportApi and sample project side by side.
      Configure your new project dialog

    3. In the 'Create a new ASP.NET web application' dialog, select 'Web Forms'.
      Note: Make sure that 'Configure for HTTPS' option is unchecked to avoid warnings shown by FireFox on Windows.
      Create a new ASP.NET web application dialog
    4. Run the following command to install GcDocs PDF Viewer. Make sure that the directory location in command prompt is set to Scripts folder. The GcDocs PDF Viewer will be installed in WebApplication1_WebForms\WebApplication1_WebForms\Scripts:

      npm install @grapecity/gcpdfviewer

    5. Replace the code in <asp:Content>..</asp:Content> tag in Default.aspx with below code:
      Default.aspx
      Copy Code
      <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
       
      <style>
          html, body, body > form, .body-content {
              height: 100%;
              width: 100%;
          }
          #host {
              padding: 60px 20px 20px 10px;
          }
      </style>
       
      <div id="host"></div>
      <script src="Scripts/node_modules/@grapecity/gcpdfviewer/gcpdfviewer.js"></script>
      <script>
          var viewer = new GcPdfViewer("#host", { supportApi: 'SupportApi' });
          viewer.addDefaultPanels();
          viewer.addAnnotationEditorPanel();
          viewer.addFormEditorPanel();
          viewer.beforeUnloadConfirmation = true;
          viewer.newDocument();
      </script>
       
      </asp:Content>
      

    6. Get the SupportApi (from GcPdf Distribution zip or from GcPdfViewer Sample zip) and copy 'SupportApi' into WebApplication1_WebForms\SupportApi as shown below:
      Support API

    7. Add the SupportApi project to WebApplication1_WebForms solution. Right click the solution, Add | Existing Project and then select WebApplication1_WebForms\SupportApi\SupportApi-WebForms.csproj
      SupportAPI-WebForms

    8. In WebApplication1_WebForms project, Right click References| Add Reference to SupportApi-WebForms.csproj
      ReferenceSupportAPI

    9. In WebApplication1_WebForms project, Right click Manage Nuget Packages and add below packages from nuget.org:
      • Microsoft.AspNet.WebApi.Core
      • Microsoft.AspNet.WebApi.WebHost

    10. Add a new class file 'WebApiConfig.cs' in App_Start folder and add the following code to it:
      WebAPIConfig file

      WebApiConfig.cs
      Copy Code
      using System.Web.Http;
      
      namespace WebApplication1_WebForms
      {
          public static class WebApiConfig
          {
              public static void Register(HttpConfiguration config)
              {
                  // Web API configuration and services
      
                  // Web API routes
                  config.MapHttpAttributeRoutes();
      
                  config.Routes.MapHttpRoute(
                      name: "DefaultApi",
                      routeTemplate: "{controller}/{action}/{id}/{id2}/{id3}",
                      defaults: new { id = RouteParameter.Optional, id2 = RouteParameter.Optional, id3 = RouteParameter.Optional }
                  );
              }
          }
      }
      

    11. Add the following lines of code to WebApplication1_WebForms\WebApplication1_WebForms\Global.asax.cs file. The final Global.asax.cs will look like below:
      using System.Web.Http;
      GlobalConfiguration.Configure(WebApiConfig.Register);
      

      Global.asax.cs
      Copy Code
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.Http; //added line
      using System.Web.Optimization;
      using System.Web.Routing;
      using System.Web.Security;
      using System.Web.SessionState;
      
      namespace WebApplication1_WebForms
      {
          public class Global : HttpApplication
          {
              void Application_Start(object sender, EventArgs e)
              {
                  // Code that runs on application startup
                  RouteConfig.RegisterRoutes(RouteTable.Routes);
                  BundleConfig.RegisterBundles(BundleTable.Bundles);
                  GlobalConfiguration.Configure(WebApiConfig.Register); //added line
              }
          }
      }
      

    12. Create a 'Controllers' folder in WebApplication1_WebForms project and add a class file 'SupportApiController.cs' to it as shown below:
      Controllers folder

    13.  Replace the code in 'SupportApiController.cs' with below code:
      SupportApiController.cs
      Copy Code
      using GcPdfViewerSupportApi.Controllers;
      
      namespace WebApplication1_WebForms
      {
          public class SupportApiController : GcPdfViewerController
          {
      
          }
      }
      

    14. Build and run the application to view GcDocs PDF Viewer with enabled editing options in your browser. You can open any PDF document and modify it. 

      GcDocs PDF Viewer