Some test text!

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 {
    public static List<ContentVersion> getContentVersions() {
      return [SELECT Id, Title, FileExtension, IsMajorVersion, IsLatest, VersionData, IsAssetEnabled, LastModifiedDate
        FROM ContentVersion WHERE IsLatest = 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;

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

  // 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


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 upcoming webinar to learn about how to collaborate on videos frame by frame directly in your browser

Save your seat