2

I am trying to display a pdf file using Base64data in the Lightning Web component, the PDF Viewer renders but it does not get the PDF file in it.

here's my HTML:

<template if:true={showModal}>
        <c-modal show-modal={showModal} is-large="true" onclosemodal={handleCloseModal}>
            <iframe id="pdfFrame" src="/resource/pdfjs/web/viewer.html" width="100%" height="600" class="pdfFrame" onload={loadpdf}></iframe>
        </c-modal>
</template>

Here's my JS controller to load PDF :

loadpdf(event){
        alert(this.pdfData);
        this.template.querySelector('pdfFrame').contentWindow.postMessage(this.pdfData,'*');    
    }

in LoadPdf alert statement, the pdf data is coming just fine, the pdf viewer also renders fine like below but without the actual file :

enter image description here

is the code to postMessage in iFrame correct here?

Using this GitHub library.

Improve this question
8
  • By any chance, can you help me with the download and print button on the viewer?
    – gs650x
    May 4, 2021 at 16:42
  • @gs650x yes, do you have a code you are trying to work with?
    – anxiousAvocado
    May 4, 2021 at 16:53
  • let me create a new thread and will post the question link here
    – gs650x
    May 4, 2021 at 16:55
  • ok also are you creating contentDocument for this PDF? if so, it is very easy to get download link
    – anxiousAvocado
    May 4, 2021 at 16:55
  • actually, I am not creating a content document, I am generating the PDF on the fly and then displaying it on the iFrame not making any server side call
    – gs650x
    May 4, 2021 at 16:57

1 Answer 1

Reset to default
1

solved this by making a change in the postmessage. Here's what I updated :

this.template.querySelector('iframe').contentWindow.postMessage(this.pdfData, window.location.origin);

I hope this helps someone load pdf in lwc.

Improve this answer
4
  • Thank you for posting your answer could you please help, with what is this.pdfData, is it blob or base64 or any other because I am still seeing the same issue.
    – gs650x
    May 4, 2021 at 12:03
  • @gs650x for me it is base64 data. You can post you code in a question, let me know if you do, I can see the code
    – anxiousAvocado
    May 4, 2021 at 12:31
  • Thank you, this would be really helpful, here is the thread that I have created. salesforce.stackexchange.com/questions/342146/…
    – gs650x
    May 4, 2021 at 12:35
  • here is the 2nd thread for saving the pdf as content document. salesforce.stackexchange.com/questions/342163/…
    – gs650x
    May 4, 2021 at 12:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .