npm 包 @bastienmoulia/pdf.js-viewer 使用教程

PDF.js 是 Mozilla 开发的一个基于 HTML5 的开源 PDF 阅读器。pdf.js-viewer 是基于 PDF.js 的一个 PDF 阅读器组件，可以在 Web 应用中直接使用。

@bastienmoulia/pdf.js-viewer 作为 pdf.js-viewer 的扩展，使得使用起来更加方便。本文将为大家介绍如何使用 @bastienmoulia/pdf.js-viewer。

安装

使用 npm 进行安装：

--- ------- ----------------------------

使用

引入

在 HTML 文件中添加以下代码：

------- -------------------------------
------- -------------------------------------------------------
------- --------------------------------------------------------------------------------

其中 /path/to 分别替换为实际的路径。

初始化

在 JavaScript 文件中添加以下代码：

----- --------- - --- -----------
  ---------- --------------------------------------
  -- ----
  -- ------------
  ------ ---- --------
  ----------- --------------
  ---------- ------------------------------------------
  -------------------- -------------------
  -------- -
    -- ---------------------------- --
    -
      ------- -------------------------------
      -- ----
      -- ------------
      ------------ -
        -- ----
        -- ------------
        ------------------- --
        ---------------- --------- ---------- ----------
      --
      -- ----
      -- ------------
      ----------------- ------
      -------------- ------
      -- ----
      -- ------------
      ------------ -
        ---------------- -----
        ------------------ --
      --
      -- ----
      ---------- -
        -- ----
        -- ------------
        -------- -----
        ----------------------- -
          -
            -- ----
            ------ --- -----------
            ------ ---- --------- -- --- ----------
            ---- -
              -- ----
              ---- -------------------------
              ------ -------
              ------- -------
              ---- ---
            --
            -------- -- -- -
              -- ------------
            --
          --
        --
      --
    --
  --
---

-----------------------------------------------

其中 /path/to 分别替换为实际的路径。

插件

@bastienmoulia/pdf.js-viewer 提供了额外的插件，可以实现更加丰富的功能。

Signature

Signature 插件提供了数字签名功能。在初始化时传入：

---------- -
  -------- -----
  ----------------------- -
    -
      ------ --- -----------
      ------ ---- --------- -- --- ----------
      ---- -
        ---- -------------------------
        ------ -------
        ------- -------
        ---- ---
      --
      -------- -- -- -
        -- ------------
      --
    --
  --
--

其中 additionalToolbarItems 可以添加自定义的工具栏。

代码注释

代码中有详细的注释，可以根据实际情况进行配置。详细参数请参考官方文档。

示例代码

以下为完整的示例代码：

--------- -----
----- ----------
  ------
    ----- ----------------
    ---------- --------------
  -------
  ------
    ------- -----------
    ---- ----------------------
    ------- -------------------------------
    ------- -------------------------------------------------------
    ------- --------------------------------------------------------------------------------
    --------
      ----- --------- - --- -----------
        ---------- --------------------------------------
        ------ ---- --------
        ----------- --------------
        ---------- ------------------------------------------
        -------------------- -------------------
        -------- -
          -
            ------- -------------------------------
            ------------ -
              ------------------- --
              ---------------- --------- ---------- ----------
            --
            ----------------- ------
            -------------- ------
            ------------ -
              ---------------- -----
              ------------------ --
            --
            ---------- -
              -------- -----
              ----------------------- -
                -
                  ------ --- -----------
                  ------ ---- --------- -- --- ----------
                  ---- -
                    ---- -------------------------
                    ------ -------
                    ------- -------
                    ---- ---
                  --
                  -------- -- -- -
                    -- ------------
                  --
                --
              --
            --
          --
        --
      ---

      -----------------------------------------------
    ---------
  -------
-------

总结

@bastienmoulia/pdf.js-viewer 为我们提供了一个方便易用的 PDF 阅读器，在 Web 应用中使用起来非常方便。希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ff481e8991b448ddc46

阅读全文

猜你喜欢

  • npm 包 firebase-express 使用教程

    Firebase-Express 是一个流行的 npm 包，它可以与 Firebase 实时数据库集成以支持实时 Web 应用程序。本文将介绍如何在前端项目中使用 firebase-express 包...

    3 年前
  • npm 包 treenotation 使用教程

    treenotation 是一个强大的 npm 包，它提供了一种方便快捷的方式来管理复杂的嵌套数据结构。在前端开发中，我们常常需要处理由对象和数组组成的嵌套结构，例如表单数据、树形结构等。

    3 年前
  • npm 包 sass-deployables 使用教程

    简介 在前端开发过程中，使用 SASS 作为 CSS 预处理器已经是常见的选择。而 sass-deployables 是一个 npm 包，它可以将 SASS 编译成 CSS 并且支持多种定制化语法，如...

    3 年前
  • npm 包 @trueadm/prepack 使用教程

    什么是 @trueadm/prepack @trueadm/prepack 是一个可以将 JavaScript 代码进行预处理、优化和转换，输出可读性更高、运行速度更快、代码更小的代码工具。

    3 年前
  • npm 包 @rill/page 使用教程

    在前端开发中，经常需要构建单页应用程序。使用工具和技术可以加速此过程。@rill/page 是一个优秀的 npm 包之一，可以让你快速地在浏览器上构建单页应用程序。

    3 年前
  • npm 包modular-sidebar使用教程

    前言 在 Web 开发中，侧边栏是一个很常见的 UI 组件，无论是博客、搜索引擎还是管理后台，侧边栏都是必不可少的一部分。然而，实现一个良好的侧边栏组件并不是一件容易的事情，需要考虑很多细节问题。

    3 年前
  • npm 包 p5.geolocation 使用教程

    在现代化的前端开发过程中，使用 npm 包已经成为了标配。p5.geolocation 是一款易于使用的 npm 包，它能帮助你在你的前端项目中轻松使用地理定位数据。

    3 年前
  • npm 包 set-head 使用教程

    在前端开发中，很多时候我们需要在页面中设置一些 meta 标签、title 等信息，用于优化 SEO、分享等功能。通常我们会通过手动在 HTML 中添加这些标签来完成，但这样比较繁琐、易出错。

    3 年前
  • npm 包 @danielkalen/print-code 使用教程

    在前端开发中，我们经常需要将代码片段或整个文件的代码打印出来，以方便我们的阅读和调试。而 npm 包 @danielkalen/print-code 就是一个非常实用的工具，它允许我们在控制台或浏览器...

    3 年前
  • npm 包 ns-tsc-rtti 使用教程

    背景介绍 前端开发是当前非常热门的职业之一，涉及技术栈众多。其中，使用 npm 包管理工具是非常重要的一环，而 ns-tsc-rtti 就是一个非常好用的 npm 包。

    3 年前
  • npm 包 cccp 使用教程

    前置知识 在学习 cccp 包之前，你需要具备以下知识： 了解 JavaScript 基础知识； 会使用 npm 包管理器； 熟悉 Webpack、Babel、ES6 等相关技术。

    3 年前
  • npm 包 angular-spa-auth 使用教程

    简介 angular-spa-auth 是一款用于 Angular 单页应用程序的用户身份验证库。它提供多种身份验证方式，包括基本认证、JWT Token 认证等。

    3 年前
  • npm 包 ns-tsc 使用教程

    ns-tsc 是一个用于 TypeScript 项目整合的 npm 包，提供了一些便捷的功能，如集成任务执行、打包、转换和类型检查等。识别其应用和使用方法对于前端开发者来说是非常重要的。

    3 年前
  • npm 包 madeira 使用教程

    随着前端技术的不断发展，越来越多的 npm 包被创建出来，以便于前端开发更方便快捷。其中一个非常有用的 npm 包是 madeira。这个 npm 包可以在本地启动一个简单的 HTTP 服务器，让前端...

    3 年前
  • npm 包 thermal-printer 使用教程

    前言 在现在的数字化时代，打印机似乎已经成为一件不再重要的设备。但是，对于有一些特殊需求的用户和企业来说，打印仍然是一项必要的操作。thermal-printer 是一个 npm 包，它提供了一种方便...

    3 年前
  • npm 包 main-dir 使用教程

    在前端开发中，我们经常需要使用各种 npm 包来帮助我们完成开发任务。而 npm 包的 main 文件通常指向一个目录，其中包含了该包的主要代码文件。但有时，我们希望将这些主要代码文件放置在一个子目录...

    3 年前
  • npm 包 gridion 使用教程

    简介 Gridion 是一个基于 CSS 的栅格布局系统，通过 npm 包的方式提供了便捷的集成方式和完整的文档支持。它可以帮助前端开发者快速地构建响应式布局。 安装 使用 npm，执行以下命令来全局...

    3 年前
  • NPM包 Optimizely-Singleton 使用教程

    Optimizely-Singleton是一个帮助前端工程师更容易使用优化测试产品Optimizely的Javascript库。通过使用该库，您可以大幅简化在您网站上集成Optimizely的步骤。

    3 年前
  • npm包act.js的使用教程

    什么是npm包act.js npm是Node.js的包管理器，act.js是一款用于处理和管理异步行为的JavaScript库，通过npm安装和使用。act.js支持promise、generator...

    3 年前
  • npm 包 storymaps-doc-template 使用教程

    前言 随着 Web 技术的不断发展，前端的工作范围也越来越广泛。其中，开发文档是不可或缺的一个环节。而要制作一个好的开发文档，则离不开一些优秀的工具和方法。今天，我想要向大家介绍一款非常好用的 npm...

    3 年前

相关推荐

    暂无文章