svelte-pdf-viewer

Svelte component wrapper for mozilla pdfjs

Usage no npm install needed!

<script type="module">
  import sveltePdfViewer from 'https://cdn.skypack.dev/svelte-pdf-viewer';
</script>

README

This is a wrapper for pdf.js, that make it ease to use.

You can use this with svelte or vanilla js.

How to

npm install svelte-pdf-viewer

Svelte

<PdfViewer file={ myFileUrl } bind:infos={ pdfInfos }/>

<script>
    import PdfViewer from 'svelte-pdf-viewer'
    let pdfInfos
    const myFileUrl = ''
</script>

Vanilla

<div id="container">
</div>

<script>
    import PdfViewer from 'svelte-pdf-viewer'
    import 'svelte-pdf-viewer/dist/bundle.css'
    const myFileUrl = ''
    
    new PdfViewer({
        target: document.querySelector('#container'),
        props: {
            file: myFileUrl
        }
    })
</script>

Props

file: string - file url
infos: object - read only object with pdf viewer infos, only useful with svelte. 
    info.totalPages: number - total of pdf pages
    info.zoom: number - current zoom percent, min: 0.4, max 1.9
    info.currentPage: number - current page

Events

No one yet