ComPDF
联系销售
文档DemoDownloadFAQ更新日志

如何使用 ComPDFKit for Web 创建 SvelteKit 应用 ​

前提条件 ​

要开始使用，您需要：

  • 最新的稳定版本的 Node.js。
  • 与 npm 兼容的包管理器。
  • 申请许可证密钥：联系 ComPDFKit 销售团队 获取免费的 30 天试用许可证。

创建新项目 ​

  1. 使用 SvelteKit 创建一个新的应用：
shell
npm create svelte@latest compdfkit-app

在设置过程中，SvelteKit 会提示您一系列问题，允许您自定义项目。对于此示例，我们使用： 选择 Svelte 应用模板？ - Skeleton project 是否添加 TypeScript 类型检查？ - 是，使用 TypeScript 语法

  1. 切换到 compdfkit-app 目录：
shell
cd compdfkit-app
  1. 安装依赖：
shell
npm install

添加 ComPDFKit for Web ​

  1. 使用 npm 安装 webviewer 作为依赖：
shell
npm i @compdfkit_pdf_sdk/webviewer --save
  1. 将包含运行 ComPDFKit Web 演示所需的静态资源文件的 "webviewer" 文件夹添加到项目的公共资源文件夹中。您需要复制的文件夹是 node_modules/@compdfkit_pdf_sdk/webviewer/dist。
shell
cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./static/webviewer

显示 PDF ​

  1. 将您想要显示的 PDF 文档添加到 static/webviewer/example 目录中。您可以使用我们的演示文档作为示例。

  2. 为 ComPDFKit 库添加一个组件包装器，并将其保存为 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. 在同一目录下，创建一个 src/routes/+layout.js 文件并添加以下内容：
javascript
export const ssr = false;
  1. 启动应用并在默认浏览器中打开：
shell
npm run dev