svelte-pdf-scrollable
v1.2.5
Published
A sveltekit component that can render PDF files using pdfjs. Since the PDFjs official documentation doesn't really bridge the gap from the examples to the demo viewer, I decided to make something in-between for hobbiests like me to work with.
Downloads
41
Maintainers
Readme
svelte-pdf-scrollable
A sveltekit component that can render PDF files using pdfjs. Since the PDFjs official documentation doesn't really bridge the gap from the examples to the demo viewer, I decided to make something in-between for hobbiests like me to work with.
I have not tried to get this working on svelte only! I relied heavily on vite's import capabilities.
Some other svelte pdf components are out there but they are all single-page viewers, so I decided to build a scrollable viewer. I have not yet included a way to toggle between scroll-mode and page-mode.
Comes with several buttons:
- Zoom In / Zoom Out
- Toggle Page Gap
- Toggle Spread Mode
- Download
Feel free to take the code apart and use it however you like!
Install
If you are making a new svelte-kit project, refer to https://kit.svelte.dev/docs/introduction#getting-started
npm install svelte-pdf-scrollable
From there you can simply import and use the viewer.
<script>
import PdfViewer from 'svelte-pdf-scrollable';
</script>
<PdfViewer
url="/my_pdf_name.pdf"
style="
position: absolute;
top: 5rem;
left: 50%;
transform: translate(-50%);
width: 900px;
height: 800px;
outline-style: solid;
outline-width: 1px;
outline-offset: 0px;
"
scale={0.8}
/>
Make sure your <PdfViewer>
styling is not position: static
. Otherwise it will not size itself properly within its container.
Demo
To see a simple demo of the pdf component, build and run from the repository:
git clone https://github.com/faigdavid/svelte-pdf-scrollable
cd svelte-pdf-scrollable
npm install
npm run dev
From there you should be able to see the demo at http://localhost:5173/