@omysoul/svelte-pdf-viewer v0.0.3

@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

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

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

Storybook