@omysoul/svelte-pdf-viewer

```bash npm install @omysoul/svelte-pdf-view ```

Usage no npm install needed!

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

README

@omysoul/svelte-pdf-view

npm install @omysoul/svelte-pdf-view

This component renders PDF pages responsively. There are three components:

  • PdfPage: responsive using a resizeObserver
  • PdfFullScreen: renders PDF full screen using window.onResize
  • PdfThumbnail: renders PDF with auto height

PdfPage

Creates a canvas that adapts its size to its container. You can use the style prop to define how the container size.

<script>
  import { PdfPage } from "omysoul/svelte-pdf-viewer";
  let numPages;
</script>

<PdfPage
  src="hello.pdf"
  page="{1}"
  style="width: 50%; height: 300px; position: relative; overflow: hidden;"
  bind:numPages
/>

Props

Prop
page page number to display
src PDF to be loaded
style div to be measured to get width of canvas
numPages you can bind to this
blank boolean
worker default: "https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js"
background letter box color
transition number in seconds default 1, 0 is instant

PdfPage

Auto generates the hight of the canvas from aspect ratio of PDF page and width of the element style is applied to. If applying a style to the measure element you only need to apply a width.

<script>
  import { PdfThumbnail } from "omysoul/svelte-pdf-viewer";
  let numPages;
</script>

<PdfThumbnail src="hello.pdf" page="{1}" style="width: 80vw;" bind:numPages />

Props

Prop
page page number to display
src PDF to be loaded
style normal HTML style attribute
numPages you can bind to this
worker default: "https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js"

PdfFullScreen

Similar to PdfPage but uses window.onResize and can only be used to display pdf full screen.

<script>
  import { PdfFullScreen } from "omysoul/svelte-pdf-viewer";
  let numPages;
</script>

<PdfFullScreen src="hello.pdf" page="{1}" />

Props

Prop
page page number to display
src PDF to be loaded
numPages you can bind to this
blank boolean
worker default: "https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js"
background letter box color
transition number in seconds default 1, 0 is instant

Storybook