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

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

前提条件 ​

要开始使用，您需要：

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

创建新项目 ​

  1. 使用 Vite 和 Svelte 模板创建一个新的 Svelte 应用：
shell
npm init vite@latest compdfkit-app --template svelte
  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/. ./public/webviewer

显示 PDF ​

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

  2. 使用 Web SDK 时，您需要使用 path 参数来告诉它复制的静态资源的位置，否则它们将相对于当前路径。

为 ComPDFKit 库添加一个组件包装器，并将其保存为 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. 替换 src/App.svelte 文件的内容如下。这将包括您新创建的组件在您的应用中：
html
<script>
	import WebViewer from './lib/WebViewer.svelte';
</script>

<main>
  <WebViewer />
</main>
  1. 自定义 src/app.css 文件中的样式：
css
body { margin: 0; }
#app { margin: 0; }
  1. 启动应用并在默认浏览器中打开：
shell
npm run dev