Click here to Skip to main content
13,863,642 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

3.5K views
4 bookmarked
Posted 7 Jun 2018
Licenced CPOL

Document Manipulation in Minutes with Plugin-Free HTML5 DocuVieware

, 7 Jun 2018
Rate this:
Please Sign up or sign in to vote.
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.

Editorial Note

This Review is from our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

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:

http://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:

http://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:

http://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:

Figure 2: Rich Text Format (RTF)

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

Figure 3: Image rotation

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.

Figure 4: Annotations

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).

Figure 5: PDF document with form fields

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:

Figure 6: Search results

Invoking the search function results in the following actions:

  1. The search dialog is automatically opened with the search parameters selected and filled
  2. The text of the search result is displayed
  3. 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:

http://www.docuvieware.com/download/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jeremy Likness
Instructor / Trainer Microsoft
United States United States
Note: articles posted here are independently written and do not represent endorsements nor reflect the views of my employer.

Jeremy Likness is a Cloud Developer Advocate for Azure at Microsoft. Jeremy 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. In his free time, Jeremy likes to CrossFit, hike, and maintain a 100% plant-based diet.

Jeremy's roles as business owner, technology executive and hands-on developer provided unique opportunities to directly impact the bottom line of multiple businesses by helping them grow and increase their organizational capacity while improving operational efficiency. He has worked with several initially small companies like Manhattan Associates and AirWatch before they grew large and experienced their transition from good to great while helping direct vision and strategy to embrace changing technology and markets. Jeremy is capable of quickly adapting to new paradigms and helps technology teams endure change by providing strong leadership, working with team members “in the trenches” and mentoring them in the soft skills that are key for engineers to bridge the gap between business and technology.

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 7 Jun 2018
Article Copyright 2018 by Jeremy Likness
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid