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 |