This tutorial shows how to configure and run the LEADTOOLS Document Compare Demo with the Document Service.
|Summary||This tutorial covers how to configure and run the LEADTOOLS Document Compare Demo with the Document Service.|
|Completion Time||5 - 10 minutes|
|IDE||Visual Studio 2017, 2019|
|Development License||Download LEADTOOLS|
Be sure to download and install the LEADTOOLS SDK, and make sure that your license and key files are located in your
Once the LEADTOOLS SDK is installed, using File Explorer, navigate to the demo in the file path below:
The Document Compare Demo relies on a server-side backend service for some of its functionality:
The Document Service is written in 3 different languages. Each Document Service uses a different Port when deploying, by default.
|Language||Path to Service Project||Default Url||Compatible OS|
||Windows, Linux, Mac|
||Windows, Linux, Mac|
By default, the Document Compare Demo is configured to work with the .NET Framework service. To change the URL to work with another service URL, simply open
<INSTALL_DIR>\LEADTOOLS21\Examples\JS\DocumentViewerDemos\DocumentCompareDemo\static\config.json and modify the
serviceHost value to the correct URL:
The .NET Framework Document Service has 2 different projects that can be opened. The
DocumentService.csproj uses local references from
<INSTALL_DIR>\LEADTOOLS21\Bin\Dotnet4\<CPU_ARCH>, and the
DocumentService_Nuget.csproj uses NuGet Packages. Choose one, and open it in Visual Studio.
Run the project through Visual Studio and explore the resources and options already available. Decide on the type of project to compile, and whether to use the NuGet Packages.
The .NET Core Document Service
DocumentService.csproj uses NuGet Packages. This project can be built and run on any operating system that has .NET Core installed on it. It can be run through Visual Studio on Windows via
When running on Linux or outside of Visual Studio, run
dotnet publish from the development environment to package the application into a directory (for example,
bin\Debug\netcoreapp2.1\publish). Copy the new
publish directory to the machine in the desired location, then test the application using
dotnet DocumentService.dll and browse to the URL.
To set up the Java Environment for use with the LEADTOOLS Document Service, refer to the PDF located here:
Open a Command Prompt window and
cd into the Document Compare Demo folder in the file path below:
npm install to pull in project dependencies.
Create a new folder in the
./static directory labeled
<INSTALL_DIR>\LEADTOOLS21\Bin\JS\ including inside the
ThirdParty folders to the new directory of
Include a batch script to copy all the LEADTOOLS dependency files by running
npm run update in the Command Prompt.
Now that the Document Service is running and the Document Compare Demo is properly set up to use the URL in the
config.json file as described in the steps above, run the Document Compare Demo via the Command Prompt with
npm run start.
Note To build a deployable version of the demo use
npm run buildand the
./staticdirectory will contain a shippable version of the demo which could be placed in IIS or another designated web server.
When the demo launches, it will connect to the service and load a default PDF. If there are any issues during the setup, this is typically where they will appear.
If the Document Service is not running when launching the Document Compare Demo, a dialog will open in the browser with the message
Cannot reach the LEADTOOLS Document Service.Retry the steps above to verify the Document Compare Demo is using the correct URL and that the service is actively running. If both are set up correctly, check the Console in the Browse Dev Tools (F12) for any errors listed.
Once everything is set up and the default PDF is loaded into the viewer, other documents and images can now be loaded via the File menu. There are 3 different methods of loading a document:
Dialog menu of the 3 different methods:
The following table describes the 3 methods:
|Open local file||Open a local file from the client system|
|Open from URL||Open a file from a URL|
|Open from cache||Open a file that has been saved to the Document Viewer cache on the server|
When the Documents are ready to be compared, selecting the triangle in the "Text Compare" will alert and ask to begin the compare.
The Document Compare Demo is able to additionally compare the raster images. Use the second from the right icon in the Text Compare panel to toggle to the Raster Compare panel.
The Document Compare Demo is able to generate a markdown (.MD) file with all the changes that occur and can be downloaded using the Save button that is located next to the Start Compare triangle button mentioned previously.
This tutorial showed how to connect and configure the LEADTOOLS Document Compare Demo to the Document Service and how to load documents, compare document, and export a comparison report. We also covered how to modify the settings on both the client-side and server-side.