ComPDF
联系销售
DemoAPI 参考文档FAQ
、

PDF 生成模板编辑器

开源可视化 PDF 生成引擎，支持自定义模板，并提供面向开发者的 API，灵活构建文档生成流程。

查看 GitHub

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

前提条件 ​

要开始使用，您需要：

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

创建新项目 ​

  1. 创建一个新的 Next.js 项目：
shell
npx create-next-app@latest

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

  2. 切换到 compdfkit-app 目录：

shell
cd compdfkit-app

添加 ComPDF 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 参数来告诉它复制的静态资源的位置，否则它们将相对于当前路径。

如果您在设置项目时选择了 JavaScript，请将以下代码添加到 app/page.js 文件中：

javascript
'use client';
import React, { useRef, useEffect } from 'react';
import Head from 'next/head'
import Webviewer from '@compdfkit_pdf_sdk/webviewer';

export default function Home() {
  const viewer = useRef(null);
  let docViewer = null;

  useEffect(() => {
    Webviewer.init({
      path: '/',
      pdfUrl: './example/developer_guide_web.pdf',
      license: '<Input your license here>',
    }, viewer.current).then((instance) => {
      docViewer = instance.docViewer;
      docViewer.addEvent('documentloaded', async () => {
        console.log('ComPDFKit Web Demo loaded');
      })
    })
  });

  return (
    <>
      <Head>
        <title>ComPDFKit Web Viewer</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div id="webviewer" ref={viewer} style={{ height: '100vh', overflow: 'hidden' }}></div>
    </>
  )
}

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

学习更多关于 WebViewer 的全面功能，请深入阅读文档。

最后，style 选项帮助我们在 WebViewer 挂载的 div 元素上应用自定义 CSS，例如宽度和高度。

  1. 启动应用程序，它将会在默认浏览器中打开：
shell
npm run dev