View PDF | Documents for PDF .NET Edition

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.

Open Microsoft Visual Studio and select Create a new project | ASP.NET Core Web Application.
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.
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'.
Open the project in File Explorer and create the 'wwwroot' and 'lib' directories as shown below:
WebApplication1\wwwroot
WebApplication1\wwwroot\lib
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.
In VS, add a new HTML page to 'wwwroot' folder and name it 'index.html'.

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>

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.

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(); }

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

Product Support Forum | Print this page