LEADTOOLS Support
Document
Document SDK Examples
How To: Use the Document Viewer in an Angular2 Application
#1
Posted
:
Thursday, March 8, 2018 4:51:26 PM(UTC)
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 Angular Finished](https://i.imgur.com/u5oiR9H.png)
Edited by user Monday, April 9, 2018 10:40:08 AM(UTC)
| Reason: Not specified
Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
![thanks](/support/forum/Themes/lead/heart_small.png)
1 user thanked Duncan Quirk for this useful post.
LEADTOOLS Support
Document
Document SDK Examples
How To: Use the Document Viewer in an Angular2 Application
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.