[SalesForce] How to render a PDF generated with jsPDF in a LWC

I'm new to Salesforce development and currently try to render a PDF that has been generated with jsPDF in a modal (i.e., I managed to generate PDFs from an LWC using jsPDF, yet I'd like to render it using a PDF viewer). Equipping the PDF viewer with download and email buttons would be great, since I'd like to replace the standard "Create PDF" button.

I followed the discussions here and here.

My test html looks as follows:

<template>
    <!-- lightning button for open modal window -->
    <lightning-button variant="brand"
       label="Create PDF (DE)"
       title="Create PDF (DE)"
       onclick={openModal}
       class="slds-m-left_x-small">
    </lightning-button>
    <!--Use template if:true to display/hide popup based on isModalOpen value--> 
    <template if:true={isModalOpen}>
        <!-- Modal/Popup Box LWC starts here -->
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container" style="width: 90% !important; max-width: 100rem">
                <!-- Modal/Popup Box LWC header here -->
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                        <lightning-icon icon-name="utility:close"
                            alternative-text="close"
                            variant="inverse"
                            size="small" ></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create Quote PDF in German</h2>
                </header>
                <!-- Modal/Popup Box LWC body starts here -->
                <div class="slds-modal__content slds-p-around_medium" style="height: 85%" id="modal-content-id-1">
                 <iframe id="pdfFrame" src="/resource/pdfjs/web/viewer.html?file=" width="100%" height="100%" class="pdfFrame" onload={generatePdf}></iframe>
                </div>
                <!-- Modal/Popup Box LWC footer starts here -->
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                    <button class="slds-button slds-button_brand" onclick={submitDetails} title="OK">OK</button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
 </template>
</template>

The js:

import {LightningElement, track} from 'lwc';
import {loadScript} from "lightning/platformResourceLoader";
import JSPDF from '@salesforce/resourceUrl/jspdf';

export default class CreateQuote extends LightningElement {
    //Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when page is loaded 
    @track isModalOpen = false;
    
    openModal() {
        // to open modal set isModalOpen track value as true
        this.isModalOpen = true;
        //this.generateData();
    }
    closeModal() {
        // to close modal set isModalOpen track value as false
        this.isModalOpen = false;
    }
    submitDetails() {
        // to close modal set isModalOpen track value as false
        //Add your code to call apex method or do some processing
        this.isModalOpen = false;
    }

    renderedCallback() {
        Promise.all([
            loadScript(this, JSPDF)
        ]);
    }

    generatePdf(){
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF({
            encryption: {
                userPermissions: ["print", "modify", "copy", "annot-forms"]
            }
        });

        pdf.text("Hello World", 20, 20);
        console.log(pdf.output('datauristring'));

        this.template.querySelector('iframe').contentWindow.postMessage(pdf.output('datauristring').split(',')[1], window.location.origin);
    }
}

Here's a screenshot of the empty viewer:

If I remove the ?file= from the iframe:

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

pdfjs viewer shows the default document (delivered with pdfjs):

However, the following is not clear to me:

• Where does "/resource/pdfjs/web/viewer.html" come from? What do I need to install and how?
• did they just install jsPDF from https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js as a static resource (this is what I did)
• how to get data into the viewer

Thanks for your help!