Svelte PDF viewer
Display PDFs in your Svelte applications

How to add the PDF Viewer to your Svelte application?

1. Install GemBox.PdfViewer

To add GemBox.PdfViewer to your Svelte application using NPM or Yarn, use the following commands:

npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewer

2. Create the reusable Svelte PDF Viewer component

Now you can use GemBox.PdfViewer in your Svelte solutions. The following example is a basic PDF Viewer component that displays an existing PDF file:

<script>
  import { onMount } from 'svelte';
  import { GemBoxPdfViewer } from '@gembox/pdfviewer';
  import '@gembox/pdfviewer/dist/es/pdfviewer.css';

  export let initialDocument = null;
  let viewerElement;

  GemBoxPdfViewer.setLicense("FREE-LIMITED-KEY");

  onMount(() => {
    GemBoxPdfViewer.create({
      container: viewerElement,
      initialDocument: initialDocument
    });
  });
</script>

<div bind:this={viewerElement} style="width: 600px; height: 350px;"></div>

You can save this component as PdfViewer.svelte and use it throughout your Svelte application as needed.

3. Display PDF files in your Svelte app

To display existing PDF documents you can use the Svelte component created in the previous step:

<script>
  import PdfViewer from './PdfViewer.svelte';
</script>

<!--  Initializes PDF Viewer with a HelloWorld.pdf file -->
<PdfViewer initialDocument="/HelloWorld.pdf" />

<!-- Shows empty PDF Viewer -->
<!-- <PdfViewer /> -->

Demo

See the live demo in action:

What next?

GemBox.PdfViewer will enable your users to read existing PDF documents from your Svelte apps. Check the other examples for more information about GemBox.PdfViewer's rich set of features and customizations. They will allow you to tailor the PDF viewer to your Svelte solution's specific requirements.