View PDF files in Svelte applications

How to add the PDF Viewer to your Svelte application?

1. Install GemBox PDF Viewer

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 components. 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

The following live demo demonstrates the GemBox PDF Viewer in action:

What next?

GemBox PDF Viewer will allow your users to read existing PDF files from your Svelte applications. Check the other examples for more information about GemBox.PdfViewer's rich set of features and customizations that will allow you to tailor the PDF viewer to your specific requirements.