Some test text!

menu
Salesforce Apexkeyboard_arrow_down

Salesforce Apex app example with WebViewer

Each Salesforce record is represented as a sObject before it is inserted into Salesforce. Likewise, when persisted records are retrieved from Salesforce, they’re stored in a sObject variable.

Standard and custom object records in the Salesforce map to their sObject types in Apex. Here are some common sObject type names in Apex used for standard objects.

  • Account
  • Contact
  • Lead
  • ContentDocument
  • ContentVersion

linkUsing Apex to access file records in Salesforce

To access files uploaded to Salesforce, we need to query ContentVersion table, which has a field called "VersionData" of type base64.

Content Version: Represents a specific version of a document in Salesforce CRM Content or Salesforce Files. In other words, this object stores document information similar to Attachment.

Here is sample Apex class

public with sharing class ContentVersionController {
    @AuraEnabled(Cacheable=true)
    public static List<ContentVersion> getContentVersions() {
      return [SELECT Id, Title, FileExtension, IsMajorVersion, IsLatest, VersionData, IsAssetEnabled, LastModifiedDate
        FROM ContentVersion WHERE IsLatest = True];
    }


    @RemoteAction
    @AuraEnabled(Cacheable=true)
    public static Map<String,String> getFileBlobById(String Id) {
        ContentVersion cv = [SELECT Id, Title, FileExtension, IsMajorVersion, IsLatest, VersionData, IsAssetEnabled
          FROM ContentVersion
          WHERE Id = :Id];

        Map<String,String> response = new Map<String, String>();
        response.put('Title', cv.Title);
        response.put('FileExtension', cv.FileExtension);
        response.put('Content', EncodingUtil.base64Encode(cv.VersionData));

        return response;
    }
}

linkOpen Salesforce files in WebViewer

In order to open base64 file in WebViewer, first we need to convert base64 to Blob object in JavaScript and pass it to readerControl.loadDocument

Here is an example Lightning Web Component app with WebViewer and showing an example on how to use Apex class and converting base64 to Blob.

import { LightningElement, wire, track, api } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
/** ContentVersionController.getFileBlobById(id) Apex method */
import getFileBlobById from '@salesforce/apex/ContentVersionController.getFileBlobById';


export default class WvInstance extends LightningElement {
  // Snipped for brevity
  initUI() {
    const viewer = new PDFTron.WebViewer({...}, viewerElement);

    viewerElement.addEventListener('ready', () => {
      this.iframeWindow = viewerElement.querySelector('iframe').contentWindow;
      this.openFile('CONTENT_VERSION_ID')
    })
  }

  // Snipped for brevity
  /**
   * Given a ContentVersion.Id stored in the Salesforce database, the
   * Base64-encoded file is converted into a Blob, and opened in WebViewer
   *
   * @param {Number} Id A number that represents the ContentVersion.Id column
   * stored in the Salesforce database, pertaining to the file that will be
   * rendered by WebViewer
   */
  openFile(Id) {
    getFileBlobById({ Id }).then(response => {
      const  { Title, FileExtension, Content } = response

      const filename = `${Title}.${FileExtension}`;
      /**
       * Converts Base64-encoded binary data into a Blob
       *
       * @param {Base64} base64 The document in Base64 format, to be converted
       * to Blob
       * @returns {Blob} The content converted into a Blob
       */
      function base64ToBlob(base64) {
        const binaryString = window.atob(base64);
        const len = binaryString.length;
        const bytes = new Uint8Array(len);
        for (let i = 0; i < len; ++i) {
          bytes[i] = binaryString.charCodeAt(i);
        }

        return new Blob([bytes], { type: 'application/pdf' });
      };
      const blob = base64ToBlob(Content);
      const payload = {
        blob: blob,
        filename: filename,
        extension: FileExtension,
        documentId: this.contentVersionId,
      }

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

  // Snipped for brevity
}

You can also find the full source code for LWC app with WebViewer here on this Github repository

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close