Some test text!

Loading...
Guides
Convert Documents

Convert 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.

Convert an Open Document

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 }, '*');
  }

Convert in your config.js

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 .

Standard conversion to pdf

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

Conversion to image files

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

    }

  }); 

}

Sample project

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

Live demo

Check out this live demo hosted outside of Salesforce.

Get the answers you need: Support

Upcoming Webinar: How Developers Add Office Viewing Without Downloading | June 9th at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use