Open TIFF documents in Salesforce

Getting Started

We recommend the Overview page to learn how to correctly use a config.js before getting started with using Webviewer.

Sample Project

Open Document

To view and load .tiff files first will be different than loading a standard document file. First you'll need to configure the lwc component pdftronWvInstance to divert any tiff files uploaded or selected files and create another iframeWindow.postMessage to the config file and transport the tiff file payload.

JavaScript

handleBlobSelected(record) {
    const blobby = new Blob([_base64ToArrayBuffer(record.body)], {
      type: mimeTypes[record.FileExtension]
    });

    const payload = {
      blob: blobby,
      extension: record.cv.FileExtension,
      filename: record.cv.Title + "." + record.cv.FileExtension,
      documentId: record.cv.Id
    };

    switch (payload.extension){
      case 'tiff':
        this.iframeWindow.postMessage({ type: 'OPEN_TIFF_BLOB', payload }, '*');
        break;
      default:
        this.iframeWindow.postMessage({ type: 'OPEN_DOCUMENT_BLOB', payload }, '*');
        break;
    }
  }

Recieve Message

In your config file, recieveMessage method would receive the tiff file payload. You can then use the full API to manually create a document, add the TIFF image to the document and load the document in WebViewer:

JavaScript

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'OPEN_TIFF_BLOB':
        loadTIFF(event.data.payload)
        break;
      default:
        break;
    }
  }
}

async function loadTIFF(payload){
  var blob = payload.blob;
  
  await PDFNet.runWithoutCleanup(async () => {
    var newDoc = await PDFNet.PDFDoc.create();
    newDoc.initSecurityHandler();
    newDoc.lock();

    let bufferTiff = await blob.arrayBuffer();
    const tiffFile = await PDFNet.Filter.createFromMemory(bufferTiff);
    await PDFNet.Convert.fromTiff(newDoc, tiffFile);
    const buffer = await newDoc.saveMemoryBuffer(PDFNet.SDFDoc.SaveOptions.e_linearized);
    newDoc.unlock();
    instance.loadDocument(newDoc);
  });
}

If you want to download from the Webviewer instance, it would be converted to a pdf file.

Sample project

You can review the Salesforce PDF App to showcase an end-to-end example of search, and how you can leverage it for redaction and content replacing on our Github repository.

Live demo

Check out this live Demo (hosted outside of Salesforce).