如何使用 ComPDF for Web 创建 React 应用

前提条件

要开始使用，您需要：

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

创建新项目

1. 创建一个新的 React 项目：

npx create-react-app compdfkit-app

2. 切换到 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 文档添加到 public/webviewer/example 目录中。您可以使用我们的演示文档作为示例。

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

将以下代码添加到您的 src/webviewer.js 文件中：

import { useEffect, useRef } from 'react';
import ComPDFKitViewer from '@compdfkit_pdf_sdk/webviewer';

export default function WebViewer() {
  const containerRef = useRef(null);

  useEffect(() => {
    let docViewer = null;

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

  return <div ref={containerRef} style={{ width: "100%", height: "100vh", overflow: "hidden" }} />
}

3. 替换 src/App.js 文件的内容如下。这将包括您新创建的组件在您的应用中：

import WebViewer from './webviewer.js';

function App() {
  return (
    <div className="App">
      <WebViewer />
    </div>
  );
}

export default App;

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

npm start