This tutorial shows how to load and annotate a document from Base64 in the HTML5/JS Document Viewer using the LEADTOOLS SDK.
Overview | |
---|---|
Summary | This tutorial covers how to load from Base64 using the HTML5/JS Document Viewer. |
Completion Time | 15 minutes |
Project | Download tutorial project (84 KB) |
Platform | JS Web Application |
IDE | Visual Studio Code - Client |
Runtime License | Download LEADTOOLS |
Get familiar with the basic steps of creating a project and initializing the Document Viewer by reviewing the Add References and Set a License and Display Files in the Document Viewer tutorials, before working on the Load Documents From Base64 in the Document Viewer - HTML5 JavaScript tutorial.
This tutorial makes use of http-server
, a console command for running a static file server. To install http-server
first install Node.js
and then install http-server
.
Start with a copy of the project created in the Display Files in the Document Viewer tutorial. If that project is unavailable, follow the steps in that tutorial to create it.
The references needed depend upon the purpose of the project. References can be added by .js
files located at <INSTALL_DIR>\LEADTOOLS23\Bin\JS
.
For this project, the following references are needed:
Leadtools.js
Leadtools.Annotations.Automation.js
Leadtools.Annotations.Designer.js
Leadtools.Annotations.Engine.js
Leadtools.Annotations.Rendering.JavaScript.js
Leadtools.Controls.js
Leadtools.Document.js
Leadtools.Document.Viewer.js
Leadtools.ImageProcessing.Main.js
Leadtools.ImageProcessing.Color.js
Leadtools.ImageProcessing.Core.js
Leadtools.ImageProcessing.Effects.js
Make sure to copy these files to the lib
folder and to import them in the index.html
file.
For a complete list of which JS files are required for your application, refer to Files to be Included with your Application
The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details including tutorials for different platforms, refer to Setting a Runtime License.
There are two types of runtime licenses:
With the project created, dependencies added, the license set, and the Document Viewer initialized, coding can begin.
Open the index.html
file located in the project folder. Ensure that the following code is inside the HTML file.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DocumentViewer Example</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!--Import LEADTOOLS Dependencies-->
<script src="./lib/Leadtools.js"></script>
<script src="./lib/Leadtools.Controls.js"></script>
<script src="./lib/Leadtools.Annotations.Engine.js"></script>
<script src="./lib/Leadtools.Annotations.Designers.js"></script>
<script src="./lib/Leadtools.Annotations.Rendering.Javascript.js"></script>
<script src="./lib/Leadtools.Annotations.Automation.js"></script>
<script src="./lib/Leadtools.ImageProcessing.Main.js"></script>
<script src="./lib/Leadtools.ImageProcessing.Color.js"></script>
<script src="./lib/Leadtools.ImageProcessing.Core.js"></script>
<script src="./lib/Leadtools.ImageProcessing.Effects.js"></script>
<script src="./lib/Leadtools.Document.js"></script>
<script src="./lib/Leadtools.Document.Viewer.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<!--Import Project Dependencies-->
<script src="b64.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="toolbar">
<div class="vcenter push-right">
<label for="interactiveSelect">Interactive mode:</label>
<select id="interactiveSelect"></select>
</div>
<div class="vcenter push-right">
<label for="annotationsSelect">Annotations objects:</label>
<select id="annotationsSelect"></select>
</div>
<div id="output" class="vcenter push-right"></div>
<div id="serviceStatus" class="vcenter push-right"></div>
</div>
<div class="docContainer">
<div class="sidepanel" id="thumbnails"></div>
<div class="centerpanel" id="viewer"></div>
<div class="sidepanel" id="bookmarks"></div>
</div>
</div>
</body>
</html>
Open the style.css
file located in the project folder. Ensure that the below lines of code are added to the body
.
body {
margin: 0;
display: flex;
flex-direction: column;
}
.container {
margin: 10px;
width: calc(100% - 20px);
height: calc(100vh - 20px);
}
.toolbar {
height: 5%;
width: 100%;
border-bottom: 2px solid #333;
flex-direction: row;
display: flex;
}
#bookmarks{
overflow: hidden;
}
.vcenter {
margin-top: auto;
margin-bottom: auto;
}
.hcenter{
margin-left: auto;
margin-right: auto;
}
.push-right{
margin-left: 10px;
}
.docContainer{
height: 95%;
width: 100%;
display: flex;
flex-direction: row;
}
.sidepanel{
width: 15%;
height: 100%;
}
.centerpanel{
width:100%;
height:100%;
}
/* Styles for 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;
}
.small-modal {
max-width: 200px;
width: 200px;
}
Open the app.js
file located in the project folder. Inside the createDocumentViewer
function, remove or comment out the line of code below.
this.loadDefaultDoc(documentViewer, interactiveSelect)
And replace it with this line:
this.loadFromB64(documentViewer, interactiveSelect)
After the createDocumentViewer
function, add the loadFromB64
function to load the Base64 string as a blob and add it to the Document Viewer.
loadFromB64 = (viewer) => {
// Load a PDF document
const byteCharacters = atob(base64);
const byteArrays = [];
const contentType = '';
const sliceSize = 512;
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
// const blobUrl = URL.createObjectURL(blob);
lt.Document.DocumentFactory.loadFromFile(blob, null)
.done((doc) => {
viewer.setDocument(doc);
})
.fail(ViewerInitializer.showServiceError);
};
Note
You will need to create a JS file that will contain the matrix you wish to use. For the purposes of this tutorial the JS file is called
b64.js
and you can download and unzip the example JS file here.
Before running the front end HTML5/JS Document Viewer, run the Document Service. The LEADTOOLS SDK installation provides three examples of the Document Service for the following platforms:
For instructions on how to set up and configure the Document Service, in the three platforms previously listed, refer to the steps in the Get Started with the Document Viewer Demo tutorial.
For the purposes of this tutorial, the .NET Framework Document Service is used and it can be found here: <INSTALL_DIR>\LEADTOOLS23\Examples\Document\JS\DocumentServiceDotNet\fx
.
Once you have the back-end Document Service running, open the Command Line and cd
into the project folder. Use the following command to run a static file server: http-server
The server should start and run on http://localhost:8080
. A message should appear in the console indicating all the ports that the server is available on.
This tutorial showed how to initialize, load, and display a Base64 document using the HTML5/JS Document Viewer.