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.

8
  • By any chance, can you help me with the download and print button on the viewer?
    – gs650x
    May 4 at 16:42
  • @gs650x yes, do you have a code you are trying to work with? May 4 at 16:53
  • let me create a new thread and will post the question link here
    – gs650x
    May 4 at 16:55
  • ok also are you creating contentDocument for this PDF? if so, it is very easy to get download link May 4 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 at 16:57
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.

4

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.