ComPDFKit
产品介绍
New
开发文档
联系我们申请试用
技术支持

如何使用 ComPDFKit for Web 创建 Web 应用程序 ​

本节将分步说明来帮助您快速开始使用 ComPDFKit for Web 制作一个 Web 应用程序。通过以下步骤，您将获得一个简单的 Web 应用程序，该应用程序可以显示指定 PDF 文件的内容。

在开始以下步骤之前，请先创建一个新的 Web 项目。

集成到原生 JavaScript 项目中 ​

  1. 创建 index.html。
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ComPDFKit Web Viewer</title>
</head>
<!-- 在 script 标签中引入 WebViewer -->
<script src='@compdfkit/webviewer.global.js'></script>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
</body>
</html>
  1. 添加 script 标签并初始化 ComPDFKitViewer for Web。
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ComPDFKit Web Viewer</title>
</head>
<!-- 在 script 标签中引入 WebViewer -->
<script src='@compdfkit/webviewer.global.js'></script>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>

  <script>
    let docViewer = null;

    ComPDFKitViewer.init({
      pdfUrl: '/webviewer/example/developer_guide_web.pdf',
      license: 'Input your license here'
    }, document.getElementById('app')).then((core) => {
      docViewer = core.docViewer;

      docViewer.addEvent('documentloaded', async () => {
        console.log('document loaded');
      })
    });
  </script>
</body>
</html>
  1. 设置服务器环境：要在本地环境 localhost 查看，我们需要设置一个服务器环境。
bash
npm install -g http-server
  1. 将网站运行起来。
bash
http-server -a localhost -p 8080

在浏览器中打开 http://localhost:8080。您将能够看到您想查看的 PDF 文件。

集成到 Vue 框架中 ​

添加 ComPDFKit for Web 包 ​

  1. 将 lib 目录中的 “@compdfkit” 文件夹添加到项目的 root 或 assets 目录中。这将作为 ComPDFKit for Web 的入口文件，并导入到您的项目中。

  2. 将 “webviewer” 文件夹添加到项目的静态资源文件夹中，该文件夹包含运行 ComPDFKit Web Demo 所需的静态文件。

显示 PDF 文档 ​

  1. 将 “@compdfkit” 文件夹中的 “webviewer.js” 文件导入到您的项目中。

  2. 通过调用 ComPDFKitViewer.init() 初始化项目中的 ComPDFKit for Web。

  3. 将要显示的 PDF 地址和许可证密钥传递到 init 方法中。

javascript
// 导入 ComPDFKit Web Demo 的JS文件。
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
  .then((core) => {
    const docViewer = core.docViewer;
    docViewer.addEvent('documentloaded', () => {
      console.log('ComPDFKit Web Demo loaded');
    })
  });

注意: 你需要联系 ComPDFKit 团队 获取 许可证 (license)。

  1. 一旦成功运行您的项目，您将能够看到您想查看的 PDF 文件。