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

前提条件

要开始使用，您需要：

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

创建新项目

1. 使用 create-nuxt-app 创建一个新的 Nuxt.js 项目：

npm init nuxt-app compdfkit-app

2. 这将会询问您一些问题。按 Enter 键选择默认选项。一旦回答完所有问题，它将安装依赖项并创建一个新的 Nuxt.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/. ./static/webviewer

显示 PDF

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

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

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

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

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

export default {
  name: 'WebViewer',

  setup() {
    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')
        })
      })
    })

    return {
      viewer,
      docViewer
    }
  }
}
</script>

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

当 WebViewer 初始化时，它会返回一个 WebViewer 实例，可以用来调用许多有用的 API，用于文档创建、操作、注释、协作等功能。

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

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

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

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

<template>
  <WebViewer />
</template>

<script>
import WebViewer from '../components/WebViewer.vue'
export default {
  name: 'app',
  components: {
    WebViewer
  }
}
</script>

<style>
html,
body {
  margin: 0;
}
</style>

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

npm run dev