如何使用 ComPDF for Web 创建 Vue.js 应用

前提条件

要开始使用，您需要：

• 安装 Node.js 版本 18.3 或更高，以创建 Vue3 项目。
• 与 npm 兼容的包管理器。
• 申请许可证密钥：联系 ComPDFKit 销售团队 获取免费的 30 天试用许可证。

创建新项目

1. 使用终端创建一个新的 Vue.js 项目：

npm create vue@latest

2. 在设置过程中，Vue.js 会提示您一系列问题，允许您自定义项目。对于此示例，我们通常使用默认设置。

3. 切换到 compdfkit-app 目录：

cd compdfkit-app

添加 ComPDF for Web

1. 使用 npm 安装 webviewer 作为依赖：

npm i @compdfkit_pdf_sdk/webviewer --save

2. 将包含运行 ComPDFKit Web 演示所需的静态资源文件的 "webviewer" 文件夹添加到项目的公共资源文件夹中。您需要复制的文件夹是 node_modules/@compdfkit_pdf_sdk/webviewer/dist。

cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./public/webviewer

显示 PDF

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

2. 当使用 Web SDK 时，您需要使用 path 参数来告诉它静态资源的位置。如果不执行此步骤，则它们将相对于当前路径。

src/components/WebViewer.vue —— 在 src/components 下创建一个名为 WebViewer.vue 的新组件。

<template>
  <div id='webviewer' ref='viewer'></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import WebViewer from '@compdfkit_pdf_sdk/webviewer'

const viewer = ref(null)
let docViewer = null

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

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

<style>
#webviewer {
  height: 100vh;
  overflow: hidden;
}
</style>

以上代码的工作原理如下：

模板部分负责将数据绑定到 Vue 实例的数据并渲染 DOM。在此示例中，我们添加了 viewer div，以便我们可以挂载 WebViewer 作为 Vue.js 的 PDF 阅读器。

脚本部分允许我们将 WebViewer 声明为 Vue 组件。它还允许我们传入 WebViewer 的 lib 文件夹位置，以及我们想要加载的初始 PDF。

接下来，在 onMounted 生命周期方法中（当元素挂载时调用），我们调用 WebViewer 构造函数并使用传入的属性。

当 WebViewer 初始化完成后，它会返回一个 WebViewer 实例，该实例可用于调用许多有用的 API，用于文档创建、操作、注释、协作等。

通过深入文档，您可以了解 WebViewer 的全面功能。

最后，样式部分帮助我们在 viewer 的 div 元素上应用自定义 CSS，如宽度和高度，WebViewer 会挂载到该元素上。

3. src/App.vue —— 在这里我们可以放入新创建的 WebViewer 组件。

• 在模板部分添加 WebViewer 组件。
• 在脚本部分的导出语句中导入 WebViewer 组件。
• 在样式部分自定义 WebViewer 样式。

<template>
  <WebViewer />
</template>

<script setup>
import WebViewer from './components/WebViewer.vue'
</script>

<style>
#app {
  display: block;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
</style>

4. 启动应用并在默认浏览器中打开：

npm run dev