How to create Dynamically Open Salesforce Files or Content Document in Lightning Component

Hello friends today create Dynamically open salesforce files or content document in lightning component, so let us begin....
Step=>1.
firste created Lightning compoent follow given bellow...
Click Setup=>developer console=>File=>New=>Lightning Component

  Step=>2.      filePreviewer.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global"
controller="fileViewerCtrl">

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>


<aura:attribute name="selectedDocumentId" type="string"/>
<aura:attribute name="lstContentDoc" type="List"/>
<aura:attribute name="hasModalOpen" type="boolean" default="false"/>


<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Title">Title</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="File Type">File Type</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Created By">Created By</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="size">size(bytes)</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.lstContentDoc}" var="CD">
<tr>
<th scope="row">
<div class="slds-truncate" title="{!CD.Title}">

<a onclick="{!c.getSelected}" data-Id="{!CD.Id}">{!CD.Title}</a>
</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!CD.FileType}">{!CD.FileType}</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!CD.CreatedBy.Name}">{!CD.CreatedBy.Name}</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!CD.ContentSize}">{!CD.ContentSize}</div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>


<aura:if isTrue="{!v.hasModalOpen}">
<section onclick="{!c.closeModel}"
role="dialog"
aria-modal="true"
class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__content slds-p-around_medium slds-text-align_center"
style="background: transparent;">
<div style="width: 50%; margin: 0 auto; text-align: left">

<lightning:fileCard fileId="{!v.selectedDocumentId}"/>
</div>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>


</aura:component>

Step=>3.  filePreviewerController.js

({
/*call apex controller method "fetchContentDocument" to get salesforce file records*/
doInit : function(component, event, helper) {
var action = component.get("c.fetchContentDocument");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set('v.lstContentDoc', response.getReturnValue());
}
else if (state === "INCOMPLETE") {
// do something
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
},
getSelected : function(component,event,helper){
// display modle and set seletedDocumentId attribute with selected record Id
component.set("v.hasModalOpen" , true);
component.set("v.selectedDocumentId" , event.currentTarget.getAttribute("data-Id"));

},
closeModel: function(component, event, helper) {
// for Close Model, set the "hasModalOpen" attribute to "FALSE"
component.set("v.hasModalOpen", false);
component.set("v.selectedDocumentId" , null);
},

})

Step=>4. Create a Apex Class
File=>New=>Apex Class
    fileViewerController.apxc

      public class fileViewerCtrl {
@AuraEnabled
public static List<contentDocument>fetchContentDocument(){
return [SELECT id,Title,FileType,CreatedBy.Name,ContentSize FROM contentDocument Limit 100];
}

}

Output: