With the GcDocs v2 sp2, we introduce a JavaScript-based GrapeCity Documents PDF Viewer (GcDocs PDF Viewer). This is a fast, modern PDF Viewer that can run on any major browser. The viewer is a cross platform solution to view PDF documents on Windows, MAC, Linux, iOS and Android devices in respective browsers.

This guide explains how to create a program that uses GrapeCity Documents PDF Viewer.

The following steps will get you started to view a PDF file in the GrapeCity Documents PDF Viewer.

Getting started with the GrapeCity Documents PDF Viewer

  1. Create ASP.NET Core application→Empty application.

  2. Download and unzip the Viewer distribution file. Place "gcpdfviewer.js and gcpdfviewer.worker.js" files in 'wwwroot' project folder.

Alternatively, install the GcDocs PDF Viewer from npm by executing the following command from the NodeJS command prompt:

npm install @grapecity/gcpdfviewer

  1. Adding the viewer to an HTML page

    • Add new HTML page to 'wwwroot' folder, name it 'index.html.'

    • Paste following code in HTML document:

<!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("GcDocsDataSheet.pdf");
        }
    </script>
  </head>
  <body onload="loadPdfViewer('#root')">
    <div id="root"></div>
    <script type="text/javascript" src="gcpdfviewer.js"></script>
  </body>
</html>

OR, use options dictionary to set different viewer options:

<script>
    function loadPdfViewer(selector) {
        var options = {
                        file: "GcDocsDataSheet.pdf",
                        friendlyFileName: "my-sample.pdf",
                        renderInteractiveForms: true,
                        password: "optional-pdf-password",
                        externalLinkTarget: "blank",
                        theme: "themes/dark-yellow",
                        themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"]
                      };
        var viewer = new GcPdfViewer(selector, options);
        viewer.addDefaultPanels();
    }
</script>
  1. Modify the Startup.cs file to load static files and default files -
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
      if (env.IsDevelopment())
      {
           app.UseDeveloperExceptionPage();
      }
      app.UseDefaultFiles();
      app.UseStaticFiles();
}

This will load index.html page.

  1. Deploy and run the application or view the index.html file in browser. The PDF is loaded into the viewer.

GcPdf Viewer

Read the full GcPdf release

Get the JavaScript Documents PDF Viewer

Download the latest version of GrapeCity Documents for PDF

Download Now!