@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/[email protected]/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/[email protected]/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/[email protected]/build/pdf.worker.min.js" | | background | letter box color | | transition | number in seconds default 1, 0 is instant |

Storybook