XtremeDocumentStudio
.NET
PDFOne
.NET
XtremeDocumentStudio
(for Java)
PDFOne
(for Java)
XtremeDocumentStudio
Delphi
eDocEngine
VCL
PDFtoolkit
VCL
StarDocs
Web APIs

Viewing PDF and image files in your web apps using Web APIs

Get an HTML5 viewer in 10 lines of code!
by Santosh Patil

Select the language for the code snippets


If you are new to StarDocs, we suggest you read the introductory article and the getting started article first. This article builds on the steps explained in those foundational articles to avoid repetition.

The API reference documentation can be found here.

What can you accomplish in about 10 lines of code? How about creating a viewer to view multi-format documents? It's a snap to create an HTML5 document viewer using the Gnostice StarDocs Cloud and On-Premises APIs. In this article we'll show you how just that: how to create a multi-format HTML5 document viewer.

Here is a short video covering the topic if you'd prefer watching over reading! However we suggest you also read the article.

Here is a short video covering the topic if you'd prefer watching over reading! However we suggest you also read the article.

Here are two short videos covering the topic if you'd prefer watching over reading! The first video uses the IntraWeb framework while the second uses the UniGUI framework. However we suggest you also read the article. Note that the article doesn't use any framework.


  1. After authentication and uploading of the document you will get the document URL. Using the document URL you can request for a viewer. The server will create a viewer and return the viewer URL. This URL can simply be launched in a new browser window or an iframe.
  2. 
    // Set up connection details
    var starDocs = new Gnostice.StarDocs(
      new Gnostice.ConnectionInfo(
        'https://api.gnostice.com/stardocs/v1', 
        '<API Key>', 
        '<API Secret>'),
      new Preferences(
        // Force full permissions on PDF files protected 
        // with an permissions/owner/master password
        new DocPasswordSettings(true))
    );
    
    // Authenticate
    starDocs.auth.loginApp()
      .done(function(response) {
        // Upload file
        var selectedFile = document.getElementById('input').files[0];
        starDocs.storage.upload(selectedFile) 
          .done(function(response) {
            var documentUrl = response.documents[0].url;
            // View file, optionally specifying the 
            // password if the document is encrypted
            starDocs.viewer.createView(documentUrl, "password")
              .done(function(response) {
                var viewerUrl = response.viewSession.url;
                // Load viewerUrl
                // Example: $(#view-frame).attr("src", viewerUrl);
              });
          });
      });
    
    // Set up connection details
    StarDocs starDocs = new StarDocs(
      new ConnectionInfo(
        new Uri("https://api.gnostice.com/stardocs/v1"),
        "<API Key>",
        "<API Secret>"), 
      new Preferences(
        // Force full permissions on PDF files protected 
        // with an permissions/owner/master password
        new DocPasswordSettings(true))
    );
    
    // Authenticate
    starDocs.Auth.loginApp();
    
    // Upload file
    DocObject docObjectBalanceSheet = starDocs.Storage.Upload(
      @"C:\Documents\BalanceSheet.pdf");
    
    // View file, optionally specifying the password if the document 
    // is encrypted
    ViewResponse response = starDocs.Viewer.CreateView(docObjectBalanceSheet, "password");
    // Launch browser pointing to the view url
    System.Diagnostics.Process.Start(response.Url);
    
    // Set up connection details
    StarDocs starDocs = new StarDocs(
      new ConnectionInfo(
        new java.net.URI("https://api.gnostice.com/stardocs/v1"),
        "<API Key>",
        "<API Secret>"), 
      new Preferences(
        // Force full permissions on PDF files protected 
        // with an permissions/owner/master password
        new DocPasswordSettings(true))
    );
    
    // Authenticate
    starDocs.auth.loginApp();
    
    // Upload file
    DocObject docObjectBalanceSheet = starDocs.storage.upload(
      "C:\\Documents\\BalanceSheet.pdf");
    
    // View file, optionally specifying the password if the document 
    // is encrypted
    ViewResponse response = starDocs.viewer.createView(docObjectBalanceSheet, "password");
    // Launch browser pointing to the view url
    if (java.awt.Desktop.isDesktopSupported())
    {
      java.awt.Desktop.getDesktop().browse(new java.net.URI(response.getUrl()));
    }
    
    var
      StarDocs: TgtStarDocsSDK;
      DocObjectBalanceSheet: TgtDocObject;
      ViewResponse: TgtViewResponse;
    begin
      StarDocs := nil;
      DocObjectBalanceSheet := nil;
      ViewResponse := nil;
      try
        // Set up connection details
        StarDocs := TgtStarDocsSDK.Create(nil);
        StarDocs.ConnectionInfo.ApiServerUri.URI :=
          'http://api.gnostice.com/stardocs/v1';
        StarDocs.ConnectionInfo.ApiKey := '<API Key>';
        StarDocs.ConnectionInfo.ApiSecret := '<API Secret>';
        // Force full permissions on PDF files protected 
        // with an permissions/owner/master password
        StarDocs.Preferences.DocPasswordSettings.ForceFullPermission := True;
    
        // Authenticate
        StarDocs.Auth.loginApp;
    
        // Upload file
        DocObjectBalanceSheet := StarDocs.Storage.Upload(
          'C:\Documents\BalanceSheet.pdf', 'password');
    
        // View file, optionally specifying the password if the document 
        // is encrypted
        ViewResponse := StarDocs.Viewer.CreateView(DocObjectBalanceSheet);
    
        // Launch browser pointing to the view url
        ShellExecute(Handle, 'open', PChar(ViewResponse.Url), 
          nil, nil, SW_SHOWNORMAL);
      finally
        if Assigned(ViewResponse) then
          FreeAndNil(ViewResponse);
        if Assigned(DocObjectBalanceSheet)
          FreeAndNil(DocObjectBalanceSheet);
        if Assigned(StarDocs) then
          FreeAndNil(StarDocs);
      end;
    end;
    

    The below screenshot shows the HTML viewer in action.

    That's it! I hope that was within 10 lines :-)

  3. If you wish to control the appearance and behavior of the viewer, you can pass in additional parameters when requesting for the view as shown below.
  4. var viewerSettings = {
        // True if PDF form-filling feature should be enabled. Default is true. 
        enableFormFilling: true,
        // True if toolbar should be shown. Default is true.
        toolbarVisible: true,
        // True if full-screen button should be shown. Default is false.
        fullScreenVisible: true,
        searchControls: {
          // True if quick-search feature should be enabled. Default is true.
          enableQuickSearch: true,
          // The color of the highlight shown over the text occurrence. 
          // It should either be a color like 'red' or of the form '#{RR}{GG}{BB}' 
          // where {RR}, {GG}, {BB} are the color component values in hex
          // corresponding to red, green and blue color respectively.
          highlightColor: "yellow"
        },
        visibleNavigationControls: {
          // True if first-page navigation button should be shown. Default is true.
          firstPage: true,
          // True if last-page navigation button should be shown. Default is true.
          lastPage: true,
          // True if previous-page navigation button should be shown. Default is true.
          prevPage: true,
          // True if next-page navigation button should be shown. Default is true.
          nextPage: true,
          // True if current-page indicator should be shown. Default is true.
          pageIndicator: true,
          // True if goto-page navigation control should be shown. Default is true.
          gotoPage: true
        },
        visibleZoomControls: {
          // True if fixed-steps zoom button should be shown. Default is true.
          fixedSteps: true,
          // True if zoom-in button should be shown. Default is true.
          zoomIn: true,
          // True if zoom-out button should be shown. Default is true.
          zoomOut: true
        },
        visibleRotationControls: {
          // True if clockwise-rotation button should be shown. Default is true.
          clockwise: true,
          // True if counter-clockwise-rotation button should be shown. Default is true.
          counterClockwise: true
        },
        visibleColorInversionControls: {
          // True if color-inversion button should be shown. 
          // Color inversion is effected on all pages. Default is false.
          allPages: true
        },
        visibleFileOperationControls: {
          // True if open-new-file button should be shown. 
          // This allows the user to open any file for viewing. Default is false.
          open: true,
          // True if download button should be shown. 
          // This allows the user to download the file that is open in the viewer. 
          // Default is false.
          download: true,
          // True if print button should be shown. 
          // This allows the user to print the file that is open in the viewer. 
          // Default is false
          print: true,
          // True if save button should be shown. 
          // This allows the user to save changes made to the document. 
          // Default is false
          save: true
        }
      };
      starDocs.viewer.createView(documentUrl, "password", viewerSettings);
    
    ViewerSettings viewerSettings = new ViewerSettings();
    // True if PDF form-filling feature should be enabled. Default is true.
    viewerSettings.EnableFormFilling = true;
    // True if toolbar should be shown. Default is true.
    viewerSettings.ToolbarVisible = true;
    // True if full-screen button should be shown. Default is false.
    viewerSettings.FullScreenVisible = true;
    // True if quick-search feature should be enabled. Default is true.
    viewerSettings.SearchControls.EnableQuickSearch = true;
    // The color of the highlight shown over the text occurrence. 
    // It should either be a color like 'red' or of the form '#{RR}{GG}{BB}' 
    // where {RR}, {GG}, {BB} are the color component values in hex
    // corresponding to red, green and blue color respectively.
    viewerSettings.SearchControls.HighlightColor = new Color(0, 255, 255);
    // True if first-page navigation button should be shown. Default is true.
    viewerSettings.VisibleNavigationControls.FirstPage = true;
    // True if last-page navigation button should be shown. Default is true.
    viewerSettings.VisibleNavigationControls.LastPage = true;
    // True if previous-page navigation button should be shown. Default is true.
    viewerSettings.VisibleNavigationControls.PrevPage = true;
    // True if next-page navigation button should be shown. Default is true.
    viewerSettings.VisibleNavigationControls.NextPage = true;
    // True if current-page indicator should be shown. Default is true.
    viewerSettings.VisibleNavigationControls.PageIndicator = true;
    // True if goto-page navigation control should be shown. Default is true.
    viewerSettings.VisibleNavigationControls.GotoPage = true;
    // True if fixed-steps zoom button should be shown. Default is true.
    viewerSettings.VisibleZoomControls.FixedSteps = true;
    // True if zoom-in button should be shown. Default is true.
    viewerSettings.VisibleZoomControls.ZoomIn = true;
    // True if zoom-out button should be shown. Default is true.
    viewerSettings.VisibleZoomControls.ZoomOut = true;
    // True if clockwise-rotation button should be shown. Default is true.
    viewerSettings.VisibleRotationControls.Clockwise = true;
    // True if counter-clockwise-rotation button should be shown. Default is true.
    viewerSettings.VisibleRotationControls.CounterClockwise = true;
    // True if color-inversion button should be shown. 
    // Color inversion is effected on all pages. Default is false.
    viewerSettings.VisibleColorInversionControls.AllPages = false;
    // True if open-new-file button should be shown. 
    // This allows the user to open any file for viewing. Default is false.
    viewerSettings.VisibleFileOperationControls.Open = true;
    // True if download button should be shown. 
    // This allows the user to download the file that is open in the viewer. 
    // Default is false.
    viewerSettings.VisibleFileOperationControls.Download = true;
    // True if print button should be shown. 
    // This allows the user to print the file that is open in the viewer. 
    // Default is false
    viewerSettings.VisibleFileOperationControls.Print = true;
    // True if save button should be shown. 
    // This allows the user to save changes made to the document. 
    // Default is false
    viewerSettings.VisibleFileOperationControls.Save = true;
    
    ViewResponse response = starDocs.Viewer.CreateView(inFile, "password", viewerSettings);
    
    ViewerSettings viewerSettings = new ViewerSettings();
    // True if PDF form-filling feature should be enabled. Default is true.
    viewerSettings.setEnableFormFilling(true);
    // True if toolbar should be shown. Default is true.
    viewerSettings.setToolbarVisible(true);
    // True if full-screen button should be shown. Default is false.
    viewerSettings.setFullScreenVisible(true);
    // True if quick-search feature should be enabled. Default is true.
    viewerSettings.getSearchControls().setEnableQuickSearch(true);
    // The color of the highlight shown over the text occurrence. 
    // It should either be a color like 'red' or of the form '#{RR}{GG}{BB}' 
    // where {RR}, {GG}, {BB} are the color component values in hex
    // corresponding to red, green and blue color respectively.
    viewerSettings.getSearchControls().setHighlightColor(new Color(0, 255, 255));
    // True if first-page navigation button should be shown. Default is true.
    viewerSettings.getVisibleNavigationControls().setFirstPage(true);
    // True if last-page navigation button should be shown. Default is true.
    viewerSettings.getVisibleNavigationControls().setLastPage(true);
    // True if previous-page navigation button should be shown. Default is true.
    viewerSettings.getVisibleNavigationControls().setPrevPage(true);
    // True if next-page navigation button should be shown. Default is true.
    viewerSettings.getVisibleNavigationControls().setNextPage(true);
    // True if current-page indicator should be shown. Default is true.
    viewerSettings.getVisibleNavigationControls().setPageIndicator(true);
    // True if goto-page navigation control should be shown. Default is true.
    viewerSettings.getVisibleNavigationControls().setGotoPage(true);
    // True if fixed-steps zoom button should be shown. Default is true.
    viewerSettings.getVisibleZoomControls().setFixedSteps(true);
    // True if zoom-in button should be shown. Default is true.
    viewerSettings.getVisibleZoomControls().setZoomIn(true);
    // True if zoom-out button should be shown. Default is true.
    viewerSettings.getVisibleZoomControls().setZoomOut(true);
    // True if clockwise-rotation button should be shown. Default is true.
    viewerSettings.getVisibleRotationControls().setClockwise(true);
    // True if counter-clockwise-rotation button should be shown. Default is true.
    viewerSettings.getVisibleRotationControls().setCounterClockwise(true);
    // True if color-inversion button should be shown. 
    // Color inversion is effected on all pages. Default is false.
    viewerSettings.getVisibleColorInversionControls().setAllPages(false);
    // True if open-new-file button should be shown. 
    // This allows the user to open any file for viewing. Default is false.
    viewerSettings.getVisibleFileOperationControls().setOpen(true);
    // True if download button should be shown. 
    // This allows the user to download the file that is open in the viewer. 
    // Default is false.
    viewerSettings.getVisibleFileOperationControls().setDownload(true);
    // True if print button should be shown. 
    // This allows the user to print the file that is open in the viewer. 
    // Default is false
    viewerSettings.getVisibleFileOperationControls().setPrint(true);
    // True if save button should be shown. 
    // This allows the user to save changes made to the document. 
    // Default is false
    viewerSettings.getVisibleFileOperationControls().setSave(true);
    
    ViewResponse response = starDocs.viewer.createView(inFile, "password", viewerSettings);
    
    var
      HighlightColor: TgtColor;
      ViewResponse: TgtViewResponse;
    begin
      HighlightColor := nil;
      ViewResponse := nil;
      try
        // True if PDF form-filling feature should be enabled. Default is true. 
        StarDocs.Viewer.ViewerSettings.EnableFormFilling := True;
        // True if toolbar should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.ToolbarVisible := True;
        // True if full-screen button should be shown. Default is false.
        StarDocs.Viewer.ViewerSettings.FullScreenVisible := True;
        // True if quick-search feature should be enabled. Default is true.
        StarDocs.Viewer.ViewerSettings.SearchControls.EnableQuickSearch := True;
        // The color of the highlight shown over the text occurrence. 
        HighlightColor := TgtColor.Create(255, 255, 0);
        StarDocs.Viewer.ViewerSettings.SearchControls.HighlightColor.Assign(
          HighlightColor);
        // True if first-page navigation button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleNavigationControls.FirstPage := True;
        // True if last-page navigation button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleNavigationControls.LastPage := True;
        // True if previous-page navigation button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleNavigationControls.PrevPage := True;
        // True if next-page navigation button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleNavigationControls.NextPage := True;
        // True if current page indicator should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleNavigationControls.PageIndicator := True;
        // True if goto-page navigation control should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleNavigationControls.GotoPage := True;
        // True if fixed-steps zoom button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleZoomControls.FixedSteps := True;
        // True if zoom-in button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleZoomControls.ZoomIn := True;
        // True if zoom-out button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleZoomControls.ZoomOut := True;
        // True if clockwise-rotation button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleRotationControls.Clockwise := True;
        // True if counter-clockwise-rotation button should be shown. Default is true.
        StarDocs.Viewer.ViewerSettings.VisibleRotationControls.CounterClockwise := True;
        // True if color-inversion button should be shown. 
        // Color inversion is effected on all pages. Default is false.
        StarDocs.Viewer.ViewerSettings.VisibleColorInversionControls.AllPages := False;
        // True if download button should be shown. 
        // This allows the user to download the file that is open in the viewer. 
        // Default is false.
        StarDocs.Viewer.ViewerSettings.VisibleFileOperationControls.Download := True;
        // True if print button should be shown. 
        // This allows the user to print the file that is open in the viewer. 
        // Default is false
        StarDocs.Viewer.ViewerSettings.VisibleFileOperationControls.Print := True;
        // True if save button should be shown. 
        // This allows the user to save changes made to the document. 
        // Default is false
        StarDocs.Viewer.ViewerSettings.VisibleFileOperationControls.Save := True;
    
        ViewResponse := StarDocs.Viewer.CreateView(DocObjectBalanceSheet, '');
      finally
        if Assigned(HighlightColor) then
          FreeAndNil(HighlightColor);
        if (ViewResponse) then
          FreeAndNil(ViewResponse);
      end;
    end;
    

---o0O0o---

Our .NET Developer Tools
XtremeDocumentStudio .NET

Multi-format document-processing component suite for .NET developers.

PDFOne .NET

A .NET PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, and bookmark PDF documents in .NET applications.

Our Delphi/C++Builder developer tools
XtremeDocumentStudio Delphi

Multi-format document-processing component suite for Delphi/C++Builder developers, covering both VCL and FireMonkey platforms.

eDocEngine VCL

A Delphi/C++Builder component suite for creating documents in over 20 formats and also export reports from popular Delphi reporting tools.

PDFtoolkit VCL

A Delphi/C++Builder component suite to edit, enhance, view, print, merge, split, encrypt, annotate, and bookmark PDF documents.

Our Java developer tools
XtremeDocumentStudio (for Java)

Multi-format document-processing component suite for Java developers.

PDFOne (for Java)

A Java PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, bookmark PDF documents in Java applications.

Our Platform-Agnostic Cloud and On-Premises APIs
StarDocs

Cloud-hosted and On-Premises REST-based document-processing and document-viewing APIs

Privacy | Legal | Feedback | Newsletter | Blog | Resellers © 2002-2017 Gnostice Information Technologies Private Limited. All rights reserved.