npm 包 ng2-pdf-viewer 使用教程

前言

随着互联网的普及，PDF 文件的使用越来越广泛，而在前端开发中需要显示 PDF 文件的需求也随之增加。ng2-pdf-viewer 是一个基于 Angular 的 PDF 文件查看器组件，它能够让我们很方便地在网页上显示 PDF 文件。本文将为大家讲解如何使用该组件。

安装

首先，我们需要使用 npm 指令来安装 ng2-pdf-viewer：

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

使用

在使用 ng2-pdf-viewer 组件时，我们需要先引入 PdfViewerModule 模块，然后在 html 文件中使用 pdf-viewer 标签来显示 PDF 文件。下面是一个简单的示例：

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

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

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

其中 pdfSrc 是一个变量，表示 PDF 文件所在的路径。我们可以在组件代码中通过改变 pdfSrc 来显示不同的 PDF 文件。

另外，组件还提供了其他各种属性与事件来控制 PDF 显示和交互行为，例如下一页，上一页，放大，缩小等等。具体可以参考官方文档。

小结

在本文中，我们为大家讲解了 ng2-pdf-viewer 组件的安装与使用方法，并演示了一个简单的案例。希望能够帮助到需要在网页中显示 PDF 文件的开发者们，也希望大家能够通过本文学习到更多有用的技术。

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

阅读全文

猜你喜欢

  • npm 包 gulp-clip-empty-files 使用教程

    在前端开发中，我们经常会使用 gulp 进行构建自动化任务，而其中一个常见的问题就是如何处理空文件。gulp-clip-empty-files 就是一个可以解决这个问题的 npm 包，接下来我们将详细...

    6 年前
  • npm 包 js-group-bundle 使用教程

    在现代化的 Web 应用中，我们经常会使用各种前端工具和框架来编写和维护我们的代码。其中，模块化的思想是一种非常流行的方式来组织和管理代码的。而 npm 是前端开发者经常使用的包管理工具之一，它提供了...

    6 年前
  • npm 包 sequencify 使用教程

    作为一个前端工程师，我们常常需要实现复杂的项目构建和打包，在这个过程中，往往会遇到各种各样的依赖关系和顺序问题，为了解决这个问题，我们可以使用 sequencify 这个 npm 包。

    6 年前
  • npm 包 stream-consume 使用教程

    前言 在 Node.js 中，流（Stream）是一种非常常见的数据处理方式，常常在 I/O 操作中使用，可以帮助我们更高效地处理大量的数据。然而，在使用流时，我们常常需要手动监听流的事件并进行处理，...

    6 年前
  • npm 包 orchestrator 使用教程

    在前端开发中，我们经常需要使用多个模块来完成一个完整的项目，而不同模块之间的依赖通常也很复杂。为了管理这种依赖关系，我们使用 npm 这个包管理工具。但是，当我们需要使用多个 npm 包来构建项目时，...

    6 年前
  • npm 包 quake-task 使用教程

    简介 quake-task 是一个基于 Gulp 的前端自动化构建工具，它提供了一系列任务（task）来编译、打包、压缩、监听等，帮助前端开发者更高效地完成代码的构建和部署。

    6 年前
  • npm 包 quake-minify 使用教程

    NPM 包 Quake-minify 使用教程 Quake-minify 是一个非常有用的 NPM 包，可以帮助我们将 JavaScript 和 CSS 文件进行压缩，从而减少文件大小、提高页面加载速...

    6 年前
  • npm 包 phantom-unit 使用教程

    前言 在开发前端页面时，我们经常需要进行单元测试。而 phantom-unit 是一个 npm 包，在无需浏览器的情况下可以运行 JavaScript 单元测试。本篇文章将详细介绍 phantom-u...

    6 年前
  • npm 包 svg-to-png 使用教程

    前言 在前端开发中，有时需要将 svg 图形转换成 png 格式，以便在浏览器中展示或进行下载。此时，我们可以使用 npm 包 svg-to-png，帮助我们简单快捷地完成转换。

    6 年前
  • npm 包 wx-alipay 使用教程

    wx-alipay 是一款基于 Node.js 平台开发的 npm 包，用于实现支付宝小程序与微信小程序之间的数据传输。在日常的前端开发工作中，使用 wx-alipay 可以大大提高开发效率。

    6 年前
  • npm包node-async-context使用教程

    前言 在编写 NodeJS 应用程序时，可能会遇到使用全局变量的情况，比如在不同的模块中需要访问相同的变量。然而使用全局变量存在诸多问题，比如不利于代码维护和测试。

    6 年前
  • npm 包 inventor 使用教程

    在前端开发中，我们经常会使用一些优秀的第三方 npm 包来帮助我们提高开发效率。但是，有时我们需要自己开发一些 npm 包来供他人使用。那么，如何开发一个好用的 npm 包呢？在本教程中，我们将介绍如...

    6 年前
  • npm 包 node-pty 使用教程

    前言 在前端开发中，我们经常需要与终端交互，例如运行一些命令行操作或启动一个终端程序。而在 Node.js 环境中，npm 包 node-pty 提供了一种方便的方法来实现这些功能。

    6 年前
  • npm 包 quickcheck 使用教程

    概述 QuickCheck 是一个快速、随机化测试框架，可以用于测试前端 JavaScript 代码。它能够帮助开发者检查程序的正确性，减少 Bug 的出现概率。 QuickCheck 生成的测试输入...

    6 年前
  • npm 包 chromath 使用教程

    前言 chromath 是一个用于颜色转换和处理的 npm 包，它提供了方便的 API，可以进行各种颜色空间（RGB、HSL、HEX 等）之间的转换和操作。本文会详细介绍 chromath 的使用方法...

    6 年前
  • npm 包 stent 使用教程

    在前端开发过程中，我们常常需要处理复杂的业务逻辑以及状态管理。而 stent 正是一款能够帮助我们优雅处理这些问题的 npm 包。 stent 简介 stent 是一款基于有限状态机的轻量级状态管理库...

    6 年前
  • npm 包 gulp-imports 使用教程

    前言 gulp-imports 是一款非常实用的 npm 包，它能够帮助前端开发自动将所有引用的本地 Sass 和 JavaScript 文件路径转换为相对于项目根目录的路径，并且自动为这些文件添加 ...

    6 年前
  • npm包gulp-hint-not使用教程

    在前端领域中，构建工具gulp已经成为了主流，它能够自动化完成诸如压缩、代码检查等繁琐的任务，大大提高了开发效率。而gulp-hint-not，则是一款gulp插件，它在代码中检测并提示潜在的问题，帮...

    6 年前
  • npm 包 kuker-emitters 使用教程

    在前端开发中，使用好的调试工具可以大大提高开发效率。其中，kuker-emitters 是一个非常好用的 npm 包，可用于调试和跟踪 Redux 和其他数据流框架的操作。

    6 年前
  • npm 包 zip-folder 使用教程

    zip-folder 是一个基于 Node.js 的 npm 包，用于将目录压缩为 zip 文件。本文将详细介绍 zip-folder 的使用方法，包括安装、API 和示例。

    6 年前

相关推荐

    暂无文章