ComPDFKit
Contact Sales
PDF SDKIDPConversion SDK
PDF SDK
DownloadFAQTechnical Support
Guides

How to Make a SvelteKit 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 SvelteKit app:
shell
npm create svelte@latest compdfkit-app

During the setup process, Next.js will prompt you with a series of questions, allowing you to customize your project.For this example, we use: Which Svelte app template? - Skeleton project Add type checking with TypeScript? - Yes, using TypeScript syntax

  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 ./static/webviewer

Display a PDF ​

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

  2. Add a component wrapper for the ComPDFKit library and save it as src/routes/+page.svelte:

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

  /**
   * @type {HTMLDivElement}
   */
  let container;
  let docViewer;

  onMount(async () => {

    await WebViewer.init({
      pdfUrl: './example/developer_guide_web.pdf',
      license: '<Input your license here>'
    }, container).then((/** @type {{ docViewer: any; }} */ instance) => {
      docViewer = instance.docViewer;

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

<body>
  <div bind:this={container} style="height: 100vh; width: 100%; overflow: hidden;" />
</body>
  1. In the same directory, create a src/routes/+layout.js file and add the contents:
javascript
export const ssr = false;
  1. Start the app and open it in your default browser:
shell
npm run dev