How To: Use the Document Viewer in an Angular2 Application

#1 Posted : Thursday, March 8, 2018 4:51:26 PM(UTC)

Duncan Quirk

Groups: Registered, Tech Support, Administrators
Posts: 70

Was thanked: 4 time(s) in 4 post(s)

The following post details how to to create a simple HTML5 Document Viewer application using Angular2 in conjunction with V20 of the LEADTOOLS SDK. In order to run the project, you must specify a valid URL to the DocumentsService. The DocumentsService project is included in the following installation location within the SDK: <install directory>:\LEADTOOLS 20\Examples\JS\Documents\DocumentViewer\Services\DocumentsService

The Document Viewer can be easily integrated into Angular2 app by performing the following steps.

Firstly, add the LEADTOOLS JS and TS files to the assets portion of your angular application. All of the typescript files can be found in the following installation path within the SDK:
<install directory>:\LEADTOOLS 20\Examples\JS\Common\Libs

We then need to include the pertinent files in the index.html file that is created when initializing a new Angular2 application.At this point, you can also add any styling you wish into the styles.css folder. Your index.html file should look something like this:

Code:


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DocViewer</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script type="text/javascript" src="assets/Leadtools.js"></script>
  <script type="text/javascript" src="assets/Leadtools.Controls.js"></script>
  <script type="text/javascript" src="assets/Leadtools.Annotations.Engine.js"></script>
  <script type="text/javascript" src="assets/Leadtools.Annotations.Designers.js"></script>
  <script type="text/javascript" src="assets/Leadtools.Annotations.Rendering.JavaScript.js"></script>
  <script type="text/javascript" src="assets/Leadtools.Annotations.Automation.js"></script>
  <script type="text/javascript" src="assets/Leadtools.Document.js"></script>
  <script type="text/javascript" src="assets/Leadtools.Document.Viewer.js"></script>
  <script src="assets/jquery-2.1.4.min.js"></script>
</head>
<body>
  <app-root ></app-root>
</body>
</html>

After referencing the LEADTOOLS JS libraries, we will need to create the Document Viewer, and thumbnail divs. These need to be added to the view that is going to be returned to the <app-root> portion of the index.html page. In the src/app/ folder, look for the app.component.html file. This file should look something like this when you're done:

Code:


<div id="thumbnails"></div>
<div id="documentViewer"></div>

The Document Viewer is full customize-able. To add styling for the Document Viewer, add your css into the styles.css file located in the src folder -- for the styling we use in our Document Viewer demo, you can add the following CSS:

Code:


/* You can add global styles to this file, and also import other style files */

html, body {
         height: 100%;
         margin: 0;
         padding: 0;
         font-size: 0;
         box-sizing: border-box;
      }
      body > div {
         font-size: 1em;
         display: inline-block;
         height: 100%;
      }
      #thumbnails {
         width: 200px;
         border-right: 2px solid #888;
         height: 100%;
         float: left;
      }
      #documentViewer {
         min-width: 400px;
         width: calc(100% - 202px);
         box-shadow: 0 0 8px 1px #333 inset;
         background-color: #eee;
         float: left;
         height: 100%;
      }

/* Styles for Elements Mode - disregard these styles if you aren't using Elements Mode. */
.lt-item, .lt-image-border {
  /* Box Shadow (view, item, image border) */
  box-shadow: #333 2px 2px 5px 1px;
}
.lt-view,.lt-thumb-item {
  /* View */
  margin: 5px;
  padding: 5px;
}
.lt-item {
  /* Item */
  border: 2px solid #6ecaab;
  background-color: #b2decf;
  padding: 10px;
}
.lt-image-border {
  /* Image Border */
  border: 3px solid #444;
  background-color: white;
}
.lt-thumb-item {
  /* Thumbnail Item */
  border: 2px solid #6ecaab;
  background-color: #b2decf;
}
.lt-thumb-item.lt-thumb-item-selected {
  /* Selected Thumbnail Item */
  border: 2px solid #59b2ba;
  background-color: #8ce1e1;
}
.lt-thumb-item-hovered {
  /* Hovered Thumbnail Item */
  border: 2px solid #52b996;
  background-color: #87c7b1;
}

Finally, to instantiate the viewer, we need to add all the pertinent logic into the src/app/app.component.ts file. This logic needs to run after the view returned from the app.component.html has been initialized. Your app.component.ts file should look like this:

Code:


import { Component } from '@angular/core';
import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  ngAfterViewInit(){
   var createOptions: lt.Document.Viewer.DocumentViewerCreateOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();

   // We will choose to use Elements Mode for this example, but you can disable it
   // Elements Mode can be styled with CSS - see the HTML for information
   createOptions.viewCreateOptions.useElements = true;
   createOptions.thumbnailsCreateOptions.useElements = true;

   // Set thumbnailsContainer to #thumbnails
   createOptions.thumbnailsContainer = document.getElementById("thumbnails");
   // Set viewContainer to #documentViewer
   createOptions.viewContainer = document.getElementById("documentViewer");

   // Create the document viewer
   var documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);

   // Set interactive mode to Pan / Zoom
   documentViewer.commands.run(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom);

   // We prefer SVG viewing over Image viewing for this example
   documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;

   // Change our thumbnails to be centered horizontally in the provided container
   documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;

   // Before we call the service, we need to explain where it is ("localhost:20000/api", for example):
   lt.Document.DocumentFactory.serviceHost = "http://localhost:20000"; // or wherever your host is
   lt.Document.DocumentFactory.servicePath = ""; // the path to the root of the service, which is nothing for this example
   lt.Document.DocumentFactory.serviceApiPath = "api"; // Routing occurs at "/api", unless you change the routing in the DocumentsService

   var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";

   lt.Document.DocumentFactory.loadFromUri(url, null)
      .done((document) => {
         documentViewer.setDocument(document);
      })
      .fail((jqXHR, statusText, errorThrown) => {
         // Get more information from LEADTOOLS
         var serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
         lt.LTHelper.log(serviceError);
         // Show an alert about what the issue is
         var lines = [];
         lines.push("Document Viewer Error:");
         lines.push(serviceError.message);
         lines.push(serviceError.detail);
         lines.push("See console for details.")
         alert(lines.join("\n"));
      });
  }
}

When you're done, your Angular site should look like this:
Angular Finished

Edited by user Monday, April 9, 2018 10:40:08 AM(UTC) | Reason: Not specified

Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.

1 user thanked Duncan Quirk for this useful post.

Joe Z on 3/26/2018(UTC)


	Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.

Notification

How To: Use the Document Viewer in an Angular2 Application