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

    The steps listed below describe how to create an ASP.NET Core Web Application that uses GcDocs PDF Viewer to view PDF Files.

    1. Open Microsoft Visual Studio and select Create a new projectASP.NET Core Web Application.
      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
      • 'Empty' - 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 'Hello World!' screen in browser). Next steps assume that the project is named as 'WebApplication1'.

    4. Open the project in File Explorer and create the 'wwwroot' and 'lib' directories as shown below:
      WebApplication1\wwwroot
      WebApplication1\wwwroot\lib

      File Explorer

    5. 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 WebApplication1\wwwroot\lib:       

      npm install @grapecity/gcpdfviewer

      Note: The location where this command runs is important as the Viewer is placed relative to it. The above command puts the Viewer in WebApplication1\wwwroot\lib\node_modules@grapecity\gcpdfviewer.
                 

    6. In VS, add a new HTML page to 'wwwroot' folder and name it 'index.html'.
      Add new item dialog

    7. Paste the following code in the index.html file.
      index.html
      Copy Code
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
          <meta name="theme-color" content="#000000">
          <title>GC Viewer Demo | PDF Plugin</title>
          <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
          <script>
              function loadPdfViewer(selector) {
                  var viewer = new GcPdfViewer(selector, { /* Specify options here */ }
                  );
                  viewer.addDefaultPanels();
                  viewer.open("Wetlands.pdf");
              }
          </script>
      </head>
      <body onload="loadPdfViewer('#root')">
          <div id="root"></div>
          <script type="text/javascript" src="lib/node_modules/@grapecity/gcpdfviewer/gcpdfviewer.js "></script>
      </body>
      </html>
      

      Note: Besides adding GcDocs PDF Viewer to the page, the above code also loads a static PDF (Wetlands.pdf) into it on startup. To make sure it works, place the Wetlands.pdf in the wwwroot directory.


    8. Modify the Startup.cs file by replacing the default 'Configure' method with below code snippet. This will open the index.html by default, when the app starts.
      Startup.cs
      Copy Code
      public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
      {
          if (env.IsDevelopment())
      
          { app.UseDeveloperExceptionPage(); }
          app.UseRouting();
          app.UseDefaultFiles();
          app.UseStaticFiles();
      }
      
      
      


    9. Build and run the application. A page with the GcDocs PDF Viewer (loaded with Wetlands.pdf) will show in your default browser.
      GcDocs PDF Viewer