WebViewer 3.2

By Matt Parizeau | 2018 Apr 05

The latest version of WebViewer has just been released and we're excited about the new capabilities it brings. We've completed the first version of our PDFTron Server (drop-in backend for WebViewer) and added support for PDF color separation rendering. Various other features and bug fixes are available including the ability to completely customize watermarks. The WebViewer changelog has all the details.

PDFTron Server

Copied to clipboard

PDFTron Server is a drop-in backend for WebViewer that offers responsive viewing and compatibility across all client platforms (including mobile), along with scaling performance that approaches purely client-side solutions. It works hand-in-hand with WebViewer on the client, initially serving images then transitioning to client-side rendering. The WebViewer showcase is using this backend behind the scenes.

The server uses Docker container technology which allows for easy setup regardless of the platform (including cloud environments like AWS), and isolates all the server components from the host system.

Check out our getting started guide to learn more.

Color separations

Copied to clipboard

Documents meant for use in professional printing environments are often specified internally in terms of specific inks (or "separations", more technically), rather than screen-centric RGB colors. WebViewer now offers special tools for these documents: it's now possible to render documents with certain separations enabled or disabled, and Webviewer can also provide the fractional separation coverage at any point on the page in realtime.

WebViewer is the first in browser PDF SDK to offer support for this feature which means a number of new workflows can stay completely within the browser. Instead of having to download a file just to view and comment on color separations (risking versioning conflicts in the process), you can achieve all of this directly in your web browser.

doc.on('colorSeparationAdded', function(e, colorData) {
  // colorData = {
  //   name, Name of the separation
  //   enabled, Whether it's enabled or not
  //   rgb, The RGB value of the color (can be used for display on the screen)
  // }
});

var results = docViewer.getColorSeparationsAtPoint(pageNumber, x, y);
// results = [{ name, value }, { name, value }, ...]

A live sample of the APIs is available now and all source code is available in the samples folder of the WebViewer download.

Completely custom watermarks

Copied to clipboard

In WebViewer 3.0 support was added for custom text watermarks displayed as headers, footers or diagonal. Now in 3.2 you have full control to change the locations of the text or add images as part of your watermarks.

$(document).on('viewerLoaded', function() {
  var docViewer = readerControl.docViewer;
  docViewer.setWatermark({
    custom: function(ctx, pageIndex, pageWidth, pageHeight) {
      ctx.fillStyle = '#ff0000';
      ctx.font = '20pt Arial';
      ctx.globalAlpha = 0.4;

      ctx.save();
      ctx.translate(0, pageHeight / 2);
      ctx.rotate(-Math.PI / 2);
      ctx.fillText('left side watermark', 0, 0);
      ctx.restore();

      ctx.save();
      ctx.translate(pageWidth, pageHeight / 2);
      ctx.rotate(Math.PI / 2);
      ctx.fillText('right side watermark', 0, 0);
      ctx.restore();

      ctx.save();
      ctx.translate((pageWidth / 2) - (logoWidth / 2), (pageHeight / 2) - (logoHeight / 2));
      ctx.drawImage(logoImage, 0, 0);
      ctx.restore();
    }
  });
});