Display Salesforce File in lightning component

Question

I see from this question that you can display an image in a lightning component. Will this work for a pdf file? Using the exact same code, it doesn't appear so.

I did try using lightning:fileCard to display my pdf, but it's too small. I'd like it to take up 40% of this modal I'm working on. It doesn't appear to get any bigger, even when I use SLDS

Here is what my markup looks like, if needed:

<div class="slds-grid slds-wrap">
<div class="slds-size_2-of-8">
    <!-- left blank intentionally -->

</div>
<div class="slds-size_3-of-8">
    <!-- form stuff -->

</div>

<div class="slds-size_3-of-8">
        <lightning:fileCard fileId="{!v.rxImage.ContentDocumentId}" 
                            description="{!v.rxImage.ContentDocument.Title}"
                            />              
</div> 
</div>

Answer 1

One possible way to display pdf in frame with the desired width and height is by creating a public link of your file.

<iframe src="https://<mydomain>/sfc/p/B0000000Tmi4/a/B0000000CcRD/47Yen7wPwwcwvQ1pNAquq7vX0tb1Y2MztsCy2iqNJF0"
            width="100%"
            height="500px"/>

Answer 2

This can be achieved with the open-source PDF.js library. With this library, you get a lot of nice Acrobat-like features for navigating between pages, zooming, etc.

Download the example ZIP file here and extract it. You can remove everything except the build and web directories, then zip it back up. Upload as a static resource, e.g. "PDFjs".

Have an iframe like this in your component:

<iframe aura:id="pdfFrame" src="/resource/PDFjs/web/viewer.html" class="pdfFrame" ></iframe>

To pass a PDF in, use the following code in your controller/helper:

var pdfFrame = component.find('pdfFrame');
pdfFrame.getElement().contentWindow.postMessage(YOUR_BASE64_ENCODED_PDF_DATA_HERE,'*');