June 19, 2018 | General, Important features, Tutorial

Document Manipulation in Minutes with Plugin-Free HTML5 DocuVieware

Hi everyone,

Today we would like to share with you an article written by Jeremy Likness about DocuVieware.
Jeremy Likness is a Cloud Developer Advocate for Azure at Microsoft. He has spent two decades building enterprise software with a focus on line of business web applications. Jeremy is the author of several highly acclaimed technical books including Designing Silverlight Business Applications and Programming the Windows Runtime by Example. He has given hundreds of technical presentations during his career as a professional developer. You can learn more about Jeremy and his work here.
We have asked Jeremy to try DocuVieware and write a short tutorial on how to get started.

Below is the full article:

Document Manipulation in Minutes with Plugin-Free HTML5 DocuVieware

By Jeremy Likness

The Internet is quickly becoming the operating system of choice for businesses around the world. Regardless of whether you use Windows, Linux, or MacOS, chances are the majority of your time is spent inside a web browser. Demand to organize and interact with documents from the convenience of the web browser is growing. Traditionally, developers have struggled with building the right code and integrating the right libraries to manage this, and often had to turn to plugins in order to provide meaningful browser interactions. The days of installing and managing extensions and plugins are fading quickly as HTML5 continues to evolve to support important business scenarios. Fortunately, tools like DocuVieware exist to provide a zero footprint, plugin-free experience across all devices and browsers.

Get Started

DocuVieware is part of an SDK written for the .NET Framework 4.5 that can also be referenced from .NET Core 2.x. You can download it here:

https://www.docuvieware.com/download/

Installation is fast and easy. First, right-click on the ZIP file and choose Properties and look for a section called “Security” and check the box next to “Unblock” and click OK. Unzip the package and double-click the MSI file to install. Follow the prompts and you’ll be up and running in no time. The installation will automatically prompt you to generate a license key that gives you a full 60 days to evaluate the product so there are no surprises.

Several tutorials are available to help you get started:

https://www.docuvieware.com/tutorials/programming/

You can choose from ASP.NET Web Forms, ASP.NET MVC Razor, ASP.NET Core, or leverage any other platform by accessing the REST API (in that scenario, you host DocuVieware on a server but access it from a client of your choice, whether it’s using jQuery, Angular, React, Vue.js or another framework). I was able to get up and running in under 30 minutes by following the .NET Core tutorial here:

https://www.docuvieware.com/guides/aspnet/webframe.html#DocuVieware%20integration%20in%20.NET%20Core%20web%20application.html

There are also premade samples included with the installation that you simply open and run.

Working with Documents

The sample application provides a toolbar for loading and interacting with documents. I first tested it out on a simple text file:

Figure 1: Text document

I followed this with a rich text file:

Both documents loaded and rendered fast and accurately. Next, I loaded an image of my German shepherd and used the rotation feature:

On the client, programmatically rotating the image is as simple as making a call to the API:

DocuViewareAPI.RotatePage(docuViewareID, 1); // Rotate90FlipNone

What about the server side? The controller method for rotating on the server is as simple as this:

[HttpPost("rotate")]
public string Rotate([FromBody]object jsonString)
{
    return DocuViewareControllerActionsHandler.rotate(jsonString);
}

The SDK is very straightforward and intuitive. The image viewer control supports over 100 raster, vector, and metadata formats ranging from PNG and TIFF to DOCX and PDF.

Annotations

An important feature for collaboration is the ability to make annotations. DocuVieware supports annotations with any type of document. You can save the annotated document in PDF or TIFF format to share with others. Here is an example of a Word document for this article that I uploaded and made several annotations to, including highlights, a ruler, circling text, adding a post-it note and free-form drawing.

Annotations can be added programmatically. Here is the JavaScript code to add a green text annotation that reads, “Paid by cash.”

function addTimeStamp() {
    timeStampAppearance = {
        fill: false,
        stroke: false,
        fontStyle: 0,
        foreColor: "#1CA30D",
        opacity: 1,
        text: "Paid by cash",
        alignment: 0,
        lineAlignment: 0
    };
    DocuViewareAPI.AddTextAnnotInteractive("DocuVieware1", timeStampAppearance, true, ["fontName", "fontStyle", "foreColor", "fontSize", "text", "opacity"]);
}

You have full control over various properties including the thickness of the stroke and how transparent the annotation is. Saving the annotated document is as simple as calling the Save method and passing a handler for success or failure. The tool will automatically prompt the user with a dialog to choose their filename and format to save the document.

Forms Interactions

Portable Document Format, or PDF for short, is a widely adopted specification for sharing documents independent of device or operating system. It is an especially useful format due its support for forms, enabling users to fill out information and even sign documents. The following is an example of a W9 form used for tax information. DocuVieware accurately renders the PDF and makes the form fields available to fill out (in the case of name and business) and check (in the case of tax classification).

The DocuVieware API also provides support to programmatically access and manipulate form fields. This opens scenarios such as using a PDF document to post information to the server, or pre-populate data on the form based on the logged-in user. The API call GetPageFormFields returns the array of form items for a page. The following example demonstrates how to access the W9 form fields and what the properties for the first field look like.

Note that you have full control over the appearance, font, attributes and values. The following code snippet programmatically retrieves the form fields and updates the name on the form to “JavaScript Jane.”

var docuControl = document.getElementById('DocuVieware1').control;
var fields = docuControl.GetPageFormFields(1);
fields[0].properties.value = 'JavaScript Jane';
docuControl.UpdateFormFields(fields);

As with other formats, you can programmatically prompt the user to save the document after it is updated.

Search

The ability to find text in documents is another important capability that is built into DocuVieware. The following code conducts a case insensitive search for the word “check” on the current page:

var docuControl = document.getElementById('DocuVieware1').control;
docuControl.Search('check', true, false, 0, true);

The search results look like this:

Invoking the search function results in the following actions:

The search dialog is automatically opened with the search parameters selected and filled
The text of the search result is displayed
The document itself is highlighted where the search results match

The user can, of course, use the built-in search dialog to conduct their own searches.

Conclusion

Customers need rich document handling capabilities and prefer to have them integrated in their business applications. The web is the primary operating system to run applications and users want their apps to work “as is” on every device they own, from computer to tablet to smartphone. DocuVieware provides these capabilities across any modern browser with fast, clear rendering and an intuitive API that is easy and straightforward to use. The API provides over 2,000 functions that run on the client and/or server. The UI is completely customizable and provides a mobile-friendly experience.

Get started by downloading your 60-day evaluation copy today:

https://www.docuvieware.com/download/

You can find this article on CodeProject.

Feel free to share!

Cheers,

Elodie

ASP.NET CodeProject document management document manipulation DocuVieware HTML5 Jeremy Likness PDF