LEADVIEW API: The Fresh and Easy-to-use Document Viewer

Whether you are a current user of LEADTOOLS or if you have never developed with our SDK before, you can easily configure LEADVIEW API, the newest high-level HTML5/JavaScript Document Viewer from LEADTOOLS. LEADVIEW API is built utilizing React and is designed to be fully customizable through configuration files without any programming needed. Using the LEADTOOLS LEADVIEW library, you can create an entire, fully-functional DocumentViewer application with as few as three lines of code. The component is highly customizable and supports all the features of the existing low-level Document Viewer.

Setting up the Project

If you have the SDK installed, navigate to <INSTALLDIR>\Examples\JS\DocumentViewerDemos\LEADVIEW_DocumentViewerDemo\wwwroot. If you have not yet installed the LEADTOOLS SDK, you will need to install before you continue.

First, create a folder in your IIS, C:\inetpub\wwwroot\, and name it LEADVIEW. Now that you have navigated to <INSTALL DIR>\Examples\JS\DocumentViewerDemos\LEADVIEW_DocumentViewerDemo\wwwroot, copy index.html to your IIS LEADVIEW folder. This html file contains all dependencies and script tags that are used to define the client-side JavaScript. Open index.html in your favorite text editor and notice all the JavaScript files and then one CSS file.

The pre-defined location for these files are in a Scripts/LEADTOOLS directory on your IIS so create a folder inside the LEADVIEW folder, name that folder Scripts. Now within the Scripts folder, add one more folder and name that LEADTOOLS. This is where you will add all the LEADTOOLS dependencies. Next, create a folder within LEADVIEW and name that Styles. This is where you can add the Leadtools.LEADVIEW.css. Lastly, copy over app.js and Polyfills.js from the examples folder and add that to the Scripts folder on your IIS.

App.js contains the function that is called to start LEADVIEW. There is not much code to this function but that is what makes easy to use.

Note!
Reminder that all the needed files can be found here, <INSTALLDIR>\Examples\JS\DocumentViewerDemos\LEADVIEW_DocumentViewerDemo\wwwroot

Running the Document Service

Now all you have to do is run the Document Service that comes with the installation. The service’s start-up settings can be found in the solution file <INSTALL DIR>\Examples\JS\Services\DocumentServiceDotNet\fx

Note! The serviceHost URL within the app.js file should match the same URL that is in the Properties → launchSettings.json

Matching URLs

Once everything matches, you can run the service from Visual Studio. If it all was set up correctly, you should see this page.

Running LEADVIEW API

After the service has been started, you can check on it in the hidden icons area of your taskbar. Click the carrot icon to show the hidden icons, then right click IIS Express. Click on DocumentService to show the application’s URL and then click the URL to ping the service page.

DocumentService

Now it is time to run the LEADVIEW application from IIS. To do so, open up a web browser and type “localhost/LEADVIEW/index.html”. There you have it, a fully function document viewer created with minimal code.


To test this with the latest version of LEADTOOLS, download the free 60 day evaluation straight from our site. If you have any comments or questions regarding this, feel free to comment on this post or contact our Support department at support@leadtools.com.

About 

Technical Marketing Engineer

This entry was posted in Document Imaging. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *