1

I have an apex that returns a string, and I want this string to decode it and display it as a pdf to a modal in Lightning Web Component. How can I achieve this? How can I display the pdf without iframe tag?

Here is my simple apex class:

public with sharing class getPdfCopy {

    @AuraEnabled(cacheable=true)
    public static pdfcopy getPdfCopy(String pdfid) {
        pdfcopy response = new pdfcopy();
        response.pdfName = 'test';
        String s = 'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
                'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
                'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
                'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
                'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
                'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
                'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
                'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
                'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
                'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
                'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
                'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
                'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G';
        response.pdfData = EncodingUtil.base64Decode(s).toString();
        return response;
    }
    public class pdfcopy{
        public String pdfName {get; set;}
        @AuraEnabled
        public String pdfData {get; set;}
    }
}

HTML:

        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate" >{pdfName}</h2>
    </header>
     <!-- modal body -->
     <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
        <dl class="slds-list_horizontal slds-wrap">
            <iframe src="data:application/pdf;base64,{pdfData}" id="frame1" width="100%" height ="100%" frameborder="0"></iframe>
        </dl>
    </div>
                   <!-- close the modal-->
                   <footer class="slds-modal__footer" >
                    <lightning-button variant="brand" label="Close" title="Close" onclick={closeModal}></lightning-button>
                </footer>
            </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>               
        </template>

JS:

@wire(getPdfCopy,{pdfid: '$pdfNumber'})  
        wiredPdfCopy({ error, data })         
        {
                this.pdfData = data.pdfData;
                this.pdfNumber = data.pdfNumber;
                this.error = undefined;
            }
        }
1
  • Where pdf is stored? As a Salesforce File? Jun 26, 2022 at 11:38

1 Answer 1

0

In your question you did mention that you don't want to use an iFrame to display the PDF. However, if you want to render a Base64 string on demand as an actual document in a LWC using data URI scheme, your only alternative is then to use other HTML elements such as <object> or <embed>.

However, I still think that an iFrame is a valid solution here. I have also written a post about it, in which I recommend the approach and explain it step by step:

How to display and download Base64 encoded PDF documents with Lightning Web Components

3
  • While this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.
    – identigral
    Feb 21, 2023 at 3:13
  • Hi @Sebastiano Schwarz, the solution in your blog doesn't work. When you try to preview a pdf from b64, this message appears in the console "Refused to frame ‘’ because it violates the the Content Security Policy directive: "frame-src blob: ....." and the LWC show the message "This content is blocked. Contact the site owner to fix the issue." I've tried setup the CSP but I can't solved. Aug 11, 2023 at 14:50
  • The solution does work, probably CSP was not configured correctly on your end. Please refer to this thread for the correct configuration to make it work: github.com/svierk/awesome-lwc-collection/issues/66 Sep 9, 2023 at 20:13

You must log in to answer this question.

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