Open TIFF documents in Salesforce

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

Sample Project

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.

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;
    }
  }

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:

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.

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.

Check out this live demo hosted outside of Salesforce.