@accusoft/pdf-viewer 中文文档教程

Question

Accusoft PDF Viewer

Accusoft PDF Viewer 是一个仅限客户端的 JavaScript 库，可让您轻松嵌入 PDF查看和注释功能到您的网站或网络应用程序。

Live Demo

点击此处观看现场演示。

Pricing and Editions

标准版包括基本的查看功能并且可以免费使用。 专业版包括付费功能，如注释、白色标签和电子签名。 联系我们，了解有关定价和版本的更多信息。

Quick Start

Install @accusoft/pdf-viewer

npm install @accusoft/pdf-viewer

Create a container div

在您希望查看器存在的页面上定义容器 DOM 元素：

<!-- NOTE: The viewer will only fill the size of your container.
       Make sure your container has a defined width and height! -->
<div id="myContainer" style="height: 800px;"></div>

For mobile, define a viewport meta tag

对于移动设备，在 HTML 的 head 中定义一个视口 meta 标记，以确保保留视口与设备屏幕大小相同：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

Import and create a viewer

导入 PdfViewerControl 并创建查看器：

import { PdfViewerControl } from '@accusoft/pdf-viewer';

(async () => {
  window.myViewer = await PdfViewerControl.create({
    container: document.getElementById('myContainer'),

    // URL or Uint8Array for a PDF
    sourceDocument: 'https://yourdomain.com/documents/example.pdf'
  });
})();

可选地，使用 'eval' 的 licenseKey 来评估 Professional 功能，启用所需的 allowedControls，例如注释工具：

(async () => {
  // Create a viewer
  window.myViewer = await PdfViewerControl.create({
    container: document.getElementById('myContainer'),

    // URL or Uint8Array for a PDF
    sourceDocument: 'https://yourdomain.com/documents/example.pdf',

    // Evaluate Professional features (page contents will be watermarked)
    licenseKey: 'eval',

    // Configure the UI:
    allowedControls: {
      // Enable or disable annotation tools (all false by default):
      ellipseTool: true,
      freehandDrawingTool: true,
      freehandSignatureTool: true,
      lineTool: true,
      rectangleTool: true,
      textHighlightTool: true,

      // Enable or disable other parts of the UI (all true by default):
      fullScreenToggle: true,
      nextAndPreviousPageButtons: true,
      pageNumberAndCount: true,
      printing: true,
      search: true,
      thumbnails: true,
      zoomInAndOutButtons: true
    }
  });
})();

Use a Script Tag Instead

作为 import 的替代方案，您还可以通过 PdfViewerControl <代码>脚本标签。

为此，可以：

• Host the bundle.js included in the @accusoft/pdf-viewer npm package and load it in your page with a script tag:

  <script src="path/to/bundle.js"></script>

• Reference the bundle.js file using a popular npm CDN, like jsdelivr.net:

  <script src="https://cdn.jsdelivr.net/npm/@accusoft/pdf-viewer@3/bundle.js"></script>

这会将查看器创建 API 附加到 window，以便您可以使用它 (window.Accusoft.PdfViewerControl)。

然后，创建查看器：

<script>
  (async () => {
    // Create a viewer
    window.myViewer = await window.Accusoft.PdfViewerControl.create({
      container: document.getElementById('myContainer'),

      // URL or Uint8Array for a PDF
      sourceDocument: 'https://yourdomain.com/documents/example.pdf'
    });
  })();
</script>

可选地，使用 'eval' 的 licenseKey 来评估 Professional 功能，启用您想要的 allowedControls，例如注释工具：

<script>
  (async () => {
    // Create a viewer
    window.myViewer = await window.Accusoft.PdfViewerControl.create({
      container: document.getElementById('myContainer'),

      // URL or Uint8Array for a PDF
      sourceDocument: 'https://yourdomain.com/documents/example.pdf',

      // Evaluate Professional features (page contents will be watermarked)
      licenseKey: 'eval',

      // Configure the UI:
      allowedControls: {
        // Enable or disable annotation tools (all false by default):
        ellipseTool: true,
        freehandDrawingTool: true,
        freehandSignatureTool: true,
        lineTool: true,
        rectangleTool: true,
        textHighlightTool: true,

        // Enable or disable other parts of the UI (all true by default):
        fullScreenToggle: true,
        nextAndPreviousPageButtons: true,
        pageNumberAndCount: true,
        printing: true,
        search: true,
        thumbnails: true,
        zoomInAndOutButtons: true
      }
    });
  })();
</script>

Samples

• Using in a React app
• Using in plain HTML via CDN

Documentation

有关完整文档，单击此处。

Feedback

向 https://ideas.accusoft.com/ 提交建议和功能请求 向

https://issues.accusoft.com

Support Plans

提供付费支持：

• For the free Standard edition, basic support is available for a charge.
• For the paid Professional edition, support is included with an annual license. Additional levels of support are also available as an upgrade.

联系我们，了解有关我们的支持包的更多信息。

Questions

发送电子邮件至 info@accusoft.com 或致电 1-800-875-7009。