digio-rapidoc/src/pdf-lib.js

RapiDoc - Open API spec viewer with built in console

import {LitElement, html, css, PropertyValues} from 'lit-element';
import {customElement, property} from 'lit-element';
import {getDocument, PDFDocumentProxy, PDFPageProxy} from "pdfjs-dist";
import "./pdf-page";

@customElement('pdf-lib')
export class PdfLib extends LitElement {
    constructor() {
        super();
        this.pages = [];
    }


    static override styles = css`
      :host {
        display: block;
        border: solid 1px gray;
        padding: 16px;
        max-width: 800px;
      }
    `;

    @property()
    pdf!: PDFDocumentProxy;

    @property()
    pages: Array<PDFPageProxy>

    @property()
    url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';


    override render() {
        return html`
            ${this.pages.map((page: PDFPageProxy) => {
                return html`
                    <pdf-page id="pdf-canvas" page="${page}"></pdf-page>`
            })}
        `;
    }

    override async firstUpdated(_changedProperties: PropertyValues) {
        super.firstUpdated(_changedProperties);
        // Asynchronous download of PDF
        let loadingTask = getDocument(this.url);
        this.pdf = await loadingTask.promise;
        this.pages = [];
        this.pages.push(await this.pdf.getPage(1));
    }

}

declare global {
    interface HTMLElementTagNameMap {
        'pdf-lib': PdfLib;
    }
}