How can I preview entire ContentVersion file (not just the first page)?

Question

I am using the following URL format to preview a PDF ContentVersion file inside a LWC:

/sfc/servlet.shepherd/version/renditionDownload?
  rendition=SVGZ&versionId=0687Z000002EkVc&operationContext=CHATTER

But this just displays the first page of the PDF.

How can I preview an entire PDF?

Answer 1

The given URL is just lacking a "page" parameter in order to download specific pages. E.g.

/sfc/servlet.shepherd/version/renditionDownload?rendition=SVGZ&versionId=0687Z000002EkVc&operationContext=CHATTER&page=2

downloads the second page. I'm unaware of any means to know the number of preview pages though. As a workaround one can render as many img tags for pages as can be successfully downloaded. A successful download takes a little time, but can be verified in Javascript by testing the naturalWidth of the img tag. The following LWC demonstrates this approach.

HTML

<template>
    <div lwc:ref="preview"></div>
</template>

Javascript

/* eslint-disable @lwc/lwc/no-async-operation */
import { LightningElement } from 'lwc';

export default class DisplayPdf extends LightningElement {

    img;
    page = 0;
    milliseconds = 100;
    renderAttemptNumber = 0;
    versionId = '068J6000006Gco6IAC';
    hasRendered = false;

    renderedCallback() {
        if(this.hasRendered) {
            return;
        }
        this.hasRendered = true;
        this.appendImage();
    }
    
    appendImage() {
        if(!this.img || this.img.naturalWidth > 0) {
            this.img = document.createElement('img');
            this.img.src = `/sfc/servlet.shepherd/version/renditionDownload?rendition=SVGZ&versionId=${this.versionId}&operationContext=CHATTER&page=${this.page}`;
            this.refs.preview.appendChild(this.img);
            this.page++;
            this.renderAttemptNumber = 0;
            setTimeout(() => {this.appendImage();}, this.milliseconds);
        } else {
            this.renderAttemptNumber++;
            if(this.renderAttemptNumber < 10) {
                setTimeout(() => {this.appendImage();}, this.milliseconds);
            } else {
                this.img.remove();
            }
        }
    }
}

The img.remove() makes sure no broken images are shown in the page (longer than a a second or so).

Here is some related information (although most of it is not about previews, but the actual file). Nowadays, in most cases where a link suffices, the NavigationMixin might do the job.

Answer 2

I was able to preview a entire ContentVersion file using a visualforce page:

Page:

<apex:page controller="PreviewContentVersionCTR">
    <apex:iframe src="data:application/pdf;base64,{!versionData}" height="700px"/>
</apex:page>

Controller:

public class PreviewContentVersionCTR {

    private final String versionData;

    public PreviewContentVersionCTR() {
        ContentVersion cv = [SELECT Id, VersionData FROM ContentVersion LIMIT 1];       
        versionData = EncodingUtil.base64Encode(cv.VersionData);
    }

    public String getVersionData() {
        return versionData;
    }
}

Answer 3

Here's where I landed for ContentDocument previews. It doesn't show the entire file initially, but clicking the resulting first page render opens the full document preview, which was a viable workaround for us.

BASE_URL + '/lightning/r/ContentDocument/' + ContentDocument.Id + '/view'

Note that I'm using Id and not something like LatestPublishedVersionId, which is a different entity and doesn't work in this scenario.

I would still prefer to get the built-in document previewer that Salesforce loads on standard related lists. It's in-page and more feature-rich.