Some images/charts appear as gray rectangles in WebViewer

When I open an Office file in WebViewer I see some images/charts are missing and appear grey instead.

These images/charts are actually TIFF/EMF data, which are not currently supported in the default WebViewer configuration.

There are four options available to add TIFF/EMF support to your office files.

  1. Go back to the author of the office file and request they use JPG/PNG images instead.
  2. Pre-convert from office files to PDF on Windows/Linux using our SDK.
  3. Switch to PDFNetJS Full, and use the blocking office conversion API (versus the default streaming conversion).
  4. Connect WebViewer Server (recommended option)

For option (2) you would follow this sample to pre-convert your office files.

For option (3) you can do the following to add EMF/WMF support.

  1. Enable PDFNetJS Full.
  2. Then add blocking Office to PDF conversion
  3. Open the arrayBuffer in WebViewer

For example this code does the last two steps above, converting the Office URL to a PDF arrayBuffer, then converts to Blob and opens in WebViewer.

instance.Core.office2PDFBuffer(urlToOfficeFile).then(arrayBuffer => {
  const arr = new Uint8Array(arrayBuffer);
  const blob = new Blob([arr], { type: 'application/pdf' });
  instance.UI.loadDocument(blob, { filename: 'myfile.pdf' });

For option (4) please see this guide on integration.

This option is recomended as WebViewer Server offers many other benefits.

1 Like