ComPDFKit
Contact Sales
PDF SDKIDPConversion SDK
PDF SDK
DownloadFAQTechnical Support
Guides

How to Make a Svelte App With ComPDFKit for Web ​

Prerequisites ​

To get started, you'll need:

  • The latest stable version of Node.js.
  • A package manager compatible with npm.
  • Apply the License Key: Contact ComPDFKit's sales team to get a free 30-day license to test the project.

Create a New Project ​

  1. Create a new Svelte app using the Vite with the Svelte template:
shell
npm init vite@latest compdfkit-app --template svelte
  1. Change your directory to compdfkit-app:
shell
cd compdfkit-app
  1. Install the dependencies:
shell
npm install

Add ComPDFKit for Web ​

  1. Install webviewer as a dependency with npm:
shell
npm i @compdfkit_pdf_sdk/webviewer --save
  1. Add the "webviewer" folder that contains the required public resource files to run the ComPDFKit Web demo, to your project’s public resource folder.The folder you need to copy is node_modules/@compdfkit_pdf_sdk/webviewer/dist.
shell
cp -r ./node_modules/@compdfkit_pdf_sdk/webviewer/dist ./public/webviewer

Display a PDF ​

  1. Add the PDF document you want to display to the public/webviewer/example directory. You can use our demo document as an example.

  2. When using the Web SDK, you need to use the path parameter to tell it where the copied static resources are located, if not, they will be relative to the current path.

Add a component wrapper for the ComPDFKit library and save it as src/lib/WebViewer.svelte:

html
<script>
  import { onMount } from 'svelte';
  import WebViewer from '@compdfkit_pdf_sdk/webviewer';

  let container;
  let docViewer;

  onMount(() => {
    WebViewer.init({
      path: '/',
      pdfUrl: './example/developer_guide_web.pdf',
      license: '<Input your license here>'
    }, container).then((instance) => {
      docViewer = instance.docViewer

      docViewer.addEvent('documentloaded', async () => {
        console.log('document loaded')
      })
    })
  });
</script>

<body>
  <div bind:this={container} style="height: 100vh; width: 100%; overflow: hidden;" />
</body>
  1. Replace the contents of the src/App.svelte file with the newly created component:
html
<script>
	import WebViewer from './lib/WebViewer.svelte';
</script>

<main>
  <WebViewer />
</main>
  1. Customize styles in the src/app.css file:
css
body { margin: 0; }
#app { margin: 0; }
  1. Start the app and open it in your default browser:
shell
npm run dev