ComPDF
Contact Sales
DemoSampleAPI ReferenceFAQ
、

PDF Generation Template Editor

Open-source visual PDF generation engine with customizable templates and developer-friendly APIs.

View on GitHub

How to Make a SvelteKit App With ComPDF 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 ComPDF 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 -a ./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