File Preview and download (all types of contents) in Community

FilePreviewAndDownload

Create these Custom Labels: 


Preview_URL: 
  /sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=	
  
  
Download_URL:
  /community_name/sfc/servlet.shepherd/document/download/

previewDownload.css

.div-class {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  box-shadow: 0 2px 13px 0 hsla(0, 0%, 76%, 0.5);
  background-color: #fff;
  padding: 5px;
}

.title {
  font-family: SST;
  font-size: 12px;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.09;
  letter-spacing: normal;
  color: #004e85;
  width: 100%;
  margin: 12px;
  text-align: center;
  word-break: break-word;
  height: fit-content;
  overflow: hidden;
}

.downloadButton {
  width: 35%;
  height: 40px;
  border-radius: 3px;
  background-color: #ed7625;
  cursor: pointer;
}
.download {
  height: 17px;
  font-family: SST;
  font-size: 14px;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

.div-class > img {
  height: 65%;
  width: 100%;
  object-fit: contain;
  object-position: top;
}
.div-class > img:hover {
  opacity: 0.5;
  cursor: pointer;
  transition: 400ms;
}

previewDownload.html

<template>
    <div class="div-class">
        <div class="title">{contentVersion.Title}</div>
        <!-- <div class=""> -->
        <img src={previewUrl} onclick={handleDownload}>
        <!-- </div> -->
        <div class="downloadButton slds-align_absolute-center" onclick={handleDownload}>
            <div class="download">Download</div>
        </div>
    </div>

</template>

previewDownload.js

/* eslint-disable no-console */
import { LightningElement, api, wire } from 'lwc';

import downloadURLLabel from '@salesforce/label/c.Download_URL';
import filePreview  from '@salesforce/label/c.Preview_URL';

export default class PreviewDownload extends LightningElement {
    @api contentVersion;
    downloadURLLabel = downloadURLLabel;
    filePreview = filePreview;

    get previewUrl() {
        return `${this.filePreview}${this.contentVersion.Id}`;
    }


    handleDownload() {
        window.open(`${this.downloadURLLabel}${this.contentVersion.ContentDocumentId}`, '_self');
    }
}

hey Lokesh,
we are using very similar approach in our community, however it's only working for logged SF user.
Do you please have any idea, if it's possible to make preview work for unauthenticated (guest) user ?