How can I preview an entire file with lwc in community?

Question

The LWC file preview is not compatible with community: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_open_files

I tried this alternative:

 this[NavigationMixin.Navigate]({
   type: 'standard__webPage',
   attributes: {
     url:baseURL + '/sfc/servlet.shepherd/version/renditionDownload? 
     rendition=SVGZ&versionId='+contentversionId,
   }
  },false)

This opens the file in new tab and not in a the same page like the Salesforce standard preview. It displays only the first page of the document

I tried also this alternative:

<div class="close-icon" onclick={closeFile}></div>
<iframeclass="slds-file slds-file_card frame" src={fileURL}></iframe> 
<div class="backdrop" onclick={closeFile}></div>

fileURL=baseURL + '/sfc/servlet.shepherd/version/renditionDownload?rendition=SVGZ&versionId='+contentversionId

This opens the file in the same page as I want but displays only the first page of the document.

Answer 1

I've done something like this and it works ok. Only limitation is I haven't found a good way to know how many pages a doc has

//controller

@api contentid; //pass in content id, or you can query for them if linked to a parent record
currentpage = 0 //all multi page docs start at 0
surl = '[your domain] + /sfc/servlet.shepherd/version/renditionDownload?versionId=';
    get itemurl() {
        if (this.contentid) {
            let surlfinal = this.surl + this.contentid;
            surlfinal += '&page=' + this.currentpage;
            if (this.selectedfile.FileType === 'PDF') {
                surlfinal += '&rendition=SVGZ';
            }
            if (this.selectedfile.FileType === 'JPG') {
                surlfinal += '&rendition=ORIGINAL_Jpg';
            }
            return surlfinal;
        }
        return '';
    }
    previousPage() {
        if (this.currentpage >= 1) {
            this.currentpage --;
        }
    }

    nextPage() {
        if (this.currentpage >= 0) {
            this.currentpage ++;
        }
    }

Then in the HTML, you can just do this:

<img src={itemurl}/>

With buttons to navigate pages:

<lightning-button label="Next Page" onclick={nextPage}></lightning-button>
<lightning-button label="Previous Page" onclick={previousPage}></lightning-button>

Answer 2

You can use the public url of the file, redirecting to that using

window.location.href = https://yourSalesforce.my.salesforce.com/sfc/p/1x0000008aol/a/1x0000000cAh/7mawInfxtYpz7M4mjvMDdiIgfjKi0xJtsgiffZYXbaE

will get you to page with preview and download option.

Alternatively, you could use this aura cmp inside screen flow.

https://github.com/forcePanda/Flow-Repo/tree/master/Screen%20Components/FilePreview%20Component