svelte-pdf

A svelte PDF viewer.

usage

npm i @am-77/svelte-pdf

<script lang="ts">
    import PDFViewer from '@am-77/svelte-pdf';

    let url =
        'https://raw.githubusercontent.com/huyubing/books-pdf/4628830db115e552b08763bd4fa70398233efa64/slime.pdf';

    let nextPage: () => void;
    let prevPage: () => void;
    let gotoPage: (nbr: number) => void;
    let pageNumber: number;
    let pagesCount: number;

    let seekPage: number;
</script>

<div>
    <PDFViewer bind:nextPage bind:prevPage bind:gotoPage bind:pageNumber bind:pagesCount {url}>
        <div slot="top-actions">
            <button on:click={prevPage}>Prev</button>
            <span>{pageNumber} / {pagesCount}</span>
            <button on:click={nextPage}>Next</button>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <input type="number" bind:value={seekPage} />
            <button on:click={() => gotoPage(seekPage)}>go</button>
        </div>

        <div slot="bottom-actions">
            <button on:click={prevPage}>Prev</button>
            <span>{pageNumber} / {pagesCount}</span>
            <button on:click={nextPage}>Next</button>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <input type="number" bind:value={seekPage} />
            <button on:click={() => gotoPage(seekPage)}>go</button>
        </div>
    </PDFViewer>
</div>