2

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

enter image description here

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>
3
+25

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"/>

enter image description here

1

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,'*');
  • How do you reference the html from the static resource? – Tyler Zika Jun 7 at 5:04
  • The HTML from the static resource is referenced in the src attribute on the iframe. – Matthew Souther Jun 10 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.