Some images/charts appear as gray rectangles in WebViewer

Technical Support WebViewer
, , , ,
1

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

Answer:
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.
    https://www.pdftron.com/documentation/web/guides/full-api/setup/#setting-up-your-javascript-document
  2. Then add blocking Office to PDF conversion
    https://www.pdftron.com/documentation/samples/js/office-to-pdf-test/
  3. Open the arrayBuffer in WebViewer
    https://www.pdftron.com/documentation/web/guides/basics/open/arraybuffer/

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