Convert 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 convert a document, first you'll need to open a document in our lightning web componenet where the Webviewer is mounted in an iFrame (in our sample, it is pdftronWvInstance).

Once a document is loaded and viewable in our preview screen, you'll be allowed to convert documents in our available formats:

• PDF, PDF/A
• DOCX, XLSX, PPTX (MS Office software or licenses are not required)
• JPG, PNG, TIFF

We store the open document into an object and label it as payload. Storing the neccessary information for conversion and saving the converted file onto salesforce.

handleBlobSelected(record) {
    const blobby = new Blob([_base64ToArrayBuffer(record.body)], {
      type: mimeTypes[record.FileExtension]
    });
    const payload = {
      blob: blobby,
      extension: record.cv.FileExtension,
      file: record.cv.Title,
      filename: record.cv.Title + "." + record.cv.FileExtension,
      documentId: record.cv.Id
    };

    this.payload = {...payload};
    this.iframeWindow.postMessage({ type: 'OPEN_DOCUMENT_BLOB', payload }, '*');
  }

Since WebViewer is hosted in an iFrame, we need to use our config.js file to access our WebViewer instance. You need to post a message to your iframeWindow like so:

this.iframeWindow.postMessage({type: 'CONVERT DOCUMENT', payload }, '*');

In a Salesforce deployment, the equivalent of instance is readerControl .

In your config.js file, you can you listen for messages posted to the iFrame by registering an event listener using window.addEventListener("message", this.handleReceiveMessage). In this case, handleReceiveMessage is a function that handles these posted messages. You can review the snippet below for an example of how to deal with posted messages.

This snippet uses the instance of Webviewer and converts the loaded document as a PDF. When downloaded, we are allowed to download from the instance using our API call downloadPdf(). Writing to Salesforce we have to grab file data and return the converted data back to the lwc with a event listener.

async function toPdf (payload, transport) {
  if (transport){
      const doc = instance.Core.documentViewer.getDocument();
      const buffer = await doc.getFileData({ downloadType: payload.exportType });
      const bufferFile = new Uint8Array(buffer);

      saveFile(bufferFile, payload.file, "." + payload.exportType);

  } else {
      let file = payload.file;

      parent.postMessage({ type: 'DOWNLOAD_DOCUMENT', file }, '*');
      instance.downloadPdf({filename: payload.file});
  }
}

handleReceiveMessage = (event) => {
    const me = this;
    if (event.isTrusted && typeof event.data === 'object') {
      switch (event.data.type) {
        case 'SAVE_DOCUMENT':
          const cvId = event.data.payload.contentDocumentId;
          saveDocument({ json: JSON.stringify(event.data.payload), recordId: this.recordId ? this.recordId : '', cvId: cvId })
          .then((response) => {
            me.iframeWindow.postMessage({ type: 'DOCUMENT_SAVED', response }, '*');
            
            fireEvent(this.pageRef, 'refreshOnSave', response);

            fireEvent(this.pageRef, 'finishConvert', '');
            this.showNotification('Success', event.data.payload.filename + ' Saved', 'success');
          })
          .catch(error => {
            me.iframeWindow.postMessage({ type: 'DOCUMENT_SAVED', error }, '*')
            fireEvent(this.pageRef, 'refreshOnSave', error);
            console.error(event.data.payload.contentDocumentId);
            console.error(JSON.stringify(error));
            this.showNotification('Error', error.body, 'error');
          });
          break;
        case 'DOWNLOAD_DOCUMENT':
          const body = event.data.file + ' Downloaded';
          fireEvent(this.pageRef, 'finishConvert', '');
          this.showNotification('Success', body, 'success');
          break;
        default:
          break;
      }
    }
  }

Similar to standard conversion to pdf, all conversions including pdf to image files would converted in config.js file.

The following snippet uses multiple namespaces in our API:

const pdfToImage = async (payload, transport) => {

  await PDFNet.initialize();

  let doc = null;

  await PDFNet.runWithCleanup(async () => {

    const buffer = await payload.blob.arrayBuffer();
    doc = await PDFNet.PDFDoc.createFromBuffer(buffer);
    doc.initSecurityHandler();
    doc.lock();

    const count = await doc.getPageCount();
    const pdfdraw = await PDFNet.PDFDraw.create(92);
    
    let itr;
    let currPage;
    let bufferFile;

    // Handle multiple pages
    for (let i = 1; i <= count; i++){

      itr = await doc.getPageIterator(i);
      currPage = await itr.current();
      bufferFile = await pdfdraw.exportStream(currPage, payload.exportType.toUpperCase());
      transport ? saveFile(bufferFile, payload.file, "." + payload.exportType) : downloadFile(bufferFile, payload.file, "." + payload.exportType);

    }

  }); 

}

You can review the Salesforce PDF App to showcase an end-to-end example of document conversion in Github repository.

Check out this live demo hosted outside of Salesforce.