CloudPDF

Integrate CloudPDF inside your Svelte App

If you already have a Svelte project you want to integrate with CloudPDF, then you can simply add the CloudPDF Javascript library as a dependency to your project. Let's walk through all the steps to get CloudPDF integrated into your project!

1. Add CloudPDF as a dependency

Now add CloudPDF as a dependency to your project. Launch the terminal (command prompt or similar on Windows), point it to your project location, and run the following command:

Using Yarn

Terminal
yarn add @cloudpdf/viewer

Using NPM

Terminal
npm install @cloudpdf/viewer --save

2. Render CloudPDF

HTML
<script>
  import { onMount } from "svelte";
  import PDFViewer from "@cloudpdf/viewer";
  onMount(() => {
    const ele = document.getElementById("viewer");
    PDFViewer(
      {
        documentId: "eee2079d-b0b6-4267-9812-b6b9eadb9c60",
        darkMode: true
      },
      ele
    ).then(instance => {});
  });
</script>
<style>
  #viewer {
    width: 100%;
  }
</style>
<div id='viewer' style="height: 100vh;">
</div>
  • documentId After you upload your document to CloudPDF you will receive a documentId. How to upload a document?
  • darkMode You can set the viewer to light or dark mode by changing this variable to true or false

To view all the options go to viewer options

Live Demo

Solutions

Docs

Company