oda-framework/components/viewers/pdf-viewer/pdf-viewer.js

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

const PATH = import.meta.url.replace('pdf-viewer.js','');

ODA({ is: 'oda-pdf-viewer', imports: '@oda/button',
    template: `
        <style>
            :host {
                @apply --vertical;
                @apply --flex;
                position: relative;
                height: 100%;
            }
        </style>
        <iframe :src style="width: 100%; height: 100%; border: none;"></iframe>
    `,
    $public: {
        nativeView: {
            $def: false,
            $save: true
        },
        url: ''
    },
    get src() {
        const n = this.url;
        if (this.nativeView)
            return  n?.startsWith('./') ? PATH + n.replace('./', '') : n;
        return PATH + 'web/viewer.html?file=' + (n?.startsWith('./') ? PATH + n.replace('./', '') : n);
    },
    isReady: false,
    attached() {
        this.isReady = true;
    }
})