PDF viewer on iFrame not showing download and print button

Question

I have the below HTML

<iframe id="pdfFrame" src="/resource/pdfjs/web/viewer.html" width="100%" height="100%" class="pdfFrame"
        onload={generatePdf}></iframe>

JS:

    generatePdf() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF({
            encryption: {
                userPermissions: ["print", "modify", "copy", "annot-forms"]
            }
        });
        
        doc.text('Hello World!', 20, 20);

    var base = doc.output('datauristring').split(',')[1];

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

It renders as below

There is no download or print button available on the PDF viewer. could someone please suggest how to get these buttons on the screen?

Answer 1

If you want to download the file based on a link, you can add a custom lightning button and then add below code that should download the file for you.

<lightning-button variant="brand" label="Download" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>

in your JS :

handleClick(event){
    let downloadLink = document.createElement("a");
                downloadLink.setAttribute("type", "hidden");
                downloadLink.href = "data:application/octet-stream;base64,"+this.pdfData; // PDF base64Data
                downloadLink.download = "filename.pdf";//modify as you need
                document.body.appendChild(downloadLink);
                downloadLink.click();
                downloadLink.remove();
}

this is what I could make it work from StachExchange only, I am having hard time finding that thread to link here.

Also, for Print you dont need to do anything differently, using cmd + p in mac works for me to get print pop up.