svelte-pdf-simple

Simple svelte PDF Viewer, packed with features and functionalities. Fully cusomizable navigation controls and styles.

Functionality / Benefits

• Displays PDF from file, url or binary/Base64 encoded string.
• Exports functions for managing custom page navigation, resizing and opening a password protected PDF.
• Provides slots which can be used when PDF is loading | PDF has failed to load | PDF requires password.
• Provides callbacks for successful/unsuccessful loading of the PDF.
• Provides callbacks for forward and backward navigation of the PDF.
• Provides access to PDF annotations and text content.
• Allows custom styling on the canvas tag where the PDF is loaded.
• Exports various properties for PDF setup: scale, rotation, offsetX, offsetY.
• You can determine on which page the PDF should be loaded.
• Has full type support.
• Written in TypeScript.

How to install

Add to your Svelte or SvelteKit project with the following lines:

npm install svelte-pdf-simple

or

yarn add svelte-pdf-simple

How to use

With path:

<script lang="ts">
  import { PdfViewer } from "svelte-pdf-simple";
  const pathToPdf = "./example.pdf";
</script>

<PdfViewer url={pathToPdf} />

With url:

<script lang="ts">
  import { PdfViewer } from "svelte-pdf-simple";
  const urlToPdf =
    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf";
</script>

<PdfViewer url={urlToPdf} />

With Base64 encoded string:

<script lang="ts">
  import { PdfViewer } from "svelte-pdf-simple";
  const base64EncodedString =
    "JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G";
</script>

<PdfViewer data={atob(base64EncodedString)} />

Full example with handling navigation, load state and potential password locked PDF

<script lang="ts">
  import { PdfViewer } from "svelte-pdf-simple";
  import type {
    PdfLoadFailureContent,
    PdfLoadSuccessContent,
    PdfPageContent,
  } from "svelte-pdf-simple";

  let pdfViewer: PdfViewer;
  let pageNumber = 0;
  let totalPages = 0;
  let isPdfLoaded = false;
  let password = "";


  function goToPage(page: number): void {
    pdfViewer.goToPage(page);
  }

  function handlePageChanged(event: CustomEvent<PdfPageContent>): void {
    pageNumber = event.details.pageNumber;
  }

  function handleLoadedSuccess(event: CustomEvent<PdfLoadSuccessContent>) {
    totalPages = event.detail.pages;
    pageNumber = 1;
    isPdfLoaded = true;
  }

  function handleLoadFailure(event: CustomEvent<PdfLoadFailureContent>) {
    // Put your logic on how to handle PDF loading failure
  }
</script>

<main>
  {#if isPdfLoaded}
    <button on:click={() => goToPage(pageNumber - 1)}>prev</button>
    <button on:click={() => goToPage(pageNumber + 1)}>next</button>
    <span>{pageNumber}/{totalPages}</span>
  {/if}
  <PdfViewer
    bind:this={pdfViewer}
    props={{
      path: "./example.pdf",
      scale: 1.5,
      withAnnotations: true,
      withTextContent: true,
    }}
    style="border: 1px solid black; display: block; margin-top: 10px;"
    on:load_success={handleLoadedSuccess}
    on:load_failure={handleLoadFailure}
    on:page_changed={handlePageChanged}
  >
    <svelte:fragment slot="loading">Loading pdf..</svelte:fragment>
    <svelte:fragment slot="loading-failed">Well... something went wrong :(</svelte:fragment>
    <svelte:fragment slot="password-required">
      <p>This pdf is password protected. Please enter the password to view it.</p>
      <input type="password" bind:value={password} />
      <button on:click={() => pdfViewer.openWithPassword(password)}>unlock</button>
    </svelte:fragment>
  </PdfViewer>
</main>

Props

NB: You cannot setup a PdfViewer without specifying a source. Therefore you must specify source through either of the following properties data | url | path.

NB: It's possible to pass more than one input source. The precedence of the sources is the following (data > path > url)

Prop name	Description	Type	Default value	Required
url	A url leading to the pdf (e.g. "https://my-domain.com/myPdf.pdf"). When loading PDF from a url there are some specifics to be considered. Read more.	string | URL | undefined	N/A	No
path	A path leading to the pdf (e.g. "./myPdf.pdf")	string | undefined	N/A	No
data	Provided when you want to specify a pdf either in binary form or a Base64 encoded pdf. When providing a Base64 encoded pdf use atob function to convert it to it's binary form when providing it in the data prop.	string | number[] | TypedArray | undefined	N/A	No
password	Specifies the password used to unlock protected pdf.	string | undefined	N/A	No
httpHeaders	Specifies headers needed when you are accessing a pdf from a url that requires authentication.	Record<string, string> | undefined	N/A	No
scale	Specifies how large you'll like your pdf to be displayed.	number (decimal)	1.0	No
page	On which page should the pdf open when it loads.	number	1	No
rotation	How much you'd like your pdf to be rotated.	number	0	No
offsetX	If specified, offsets the pdf on the X axis.	number	0	No
offsetY	If specified, offsets the pdf on the Y axis.	number	0	No
rotation	If specified, sets the rotation of the each page of the pdf.	Degree	0	No
withAnnotations	Specifies whether you'll like to attach annotations from the pages you load.	boolean	False	No
withTextContent	Specifies whether you'll like to attach the text content from the pages you load.	boolean	False	No
additionalParams	Additional pdfjs related parameters which you could add if necessary.	AdditionalParameters | undefined	N/A	No

Styling

You can style the canvas in which the pdf is loaded by just passing style property to PdfViewer. $$restProps are passed down the to canvas element.

<PdfViewer 
  props={{path: "./myPdf.pdf"}} 
  style="border: 1px solid black; display: block; margin-top: 10px;"/>

Handling

Function name	Description	Accepted parameter type
goToPage/0	Changes PDF to specified page.	N/A
resize/1	Resizes the PDF to the desired scale value.	number (decimal)
rotate/1	Rotate the PDF to the desired degree.	Degree
openWithPassword/1	Tries to open a locked PDF with the provided password.	string

Dispatch Events

Event name	Description	Type
page_changed	Notifies when PDF changes page. This event also holds page annotations and textContents if they were requested in the PdfViewer props	PdfPageContent
load_success	Notifies that PDF is successfully loaded.	PdfLoadSuccess
load_failure	Notifies that some Error has ocurred while loading the PDF.	PdfLoadFailure
password_required	Notifies that PDF is password protected and the user should provide a password to unlock the PDF.	void
incorrect_password	Notifies that the provided password to unlock the PDF is incorrect.	void

Slots

Slot name	Description
loading	This slot is visible while the PDF is loading.
loading-failed	This slot is visible if PDF has failed to load.
password_required	This slot is visible if the PDF requires a password to be unlocked. This is a good spot to place an input form for specifying the password of the PDF

Demo example

To see an example implementation, clone the svelte-pdf-simple repo run the following commands:

$ git clone https://github.com/gspasov/svelte-pdf-simple.git
$ npm install
$ npm run dev

Using PDFs from links

Bare in mind that the pdf.js library enforces cors, therefore if you whish to supply a PDF which is coming from a link, the server serving this pdf should have appropriate CORS settings in the headers. For more information about this please follow this issue in pdf.js

For example, if you are hosting your pds in AWS S3, the following CORS setting work:

[
  {
    "AllowedHeaders": ["Authorization", "Range"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["*"], // supply custom origin
    "ExposeHeaders": ["Accept-Ranges", "Content-Range", "Content-Encoding", "Content-Length"]
  }
]

Contributing

If you would like to see some change/modification open an Issue or a PR. I'd be happy to look into it.

License

MIT