简介
finna-pdf-viewer 是一款基于 React 构建的 PDF 阅读器组件，它可以让你在任何 React 项目中轻松地展示 PDF 文档。本文将为大家介绍如何使用 finna-pdf-viewer 去展示 PDF 文档。
安装
你可以通过 npm 来安装 finna-pdf-viewer：
npm install finna-pdf-viewer
安装完成后，你可以在 React 项目中引入 finna-pdf-viewer 组件：
import PdfViewer from 'finna-pdf-viewer';
使用
finna-pdf-viewer 组件可以接收以下 props：
url（必选）：PDF 文档的远程地址或者本地地址。height（可选）：PDF 阅读器的高度，单位为像素。pageTitle（可选）：PDF 文档的标题，在网页的标题栏上显示。pageScale（可选）：PDF 文档的放缩比例，默认为 1。initialPage（可选）：PDF 文档的初始页码，默认为 1。
下面是一个使用 finna-pdf-viewer 的简单例子：
import PdfViewer from 'finna-pdf-viewer'; function App() { return ( <PdfViewer url="https://example.com/document.pdf" height={600} pageTitle="Document" pageScale={1.5} initialPage={5} /> ); }
上面的例子中，我们引入了 PdfViewer 组件，然后传入了 PDF 文档的地址、高度、标题、放缩比例和初始页码等参数。
示例
假设我们有一个名为 Document.pdf 的 PDF 文档，它的页面结构如下：
现在，我们将使用 finna-pdf-viewer 将该文档展示在我们的 React 页面中。
首先，我们需要将 Document.pdf 上传到我们的服务器。为了展示方便，我们可以把它放到 public 目录下。然后，我们编写如下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------- ---- ------------------- -------- ----- - ------ - ---------- ------------------- ------------ -------------------- --------------- --------------- -- -- - ------ ------- ----展开代码
在上面的代码中，我们引入了 PdfViewer 组件，然后传入了 PDF 文档的地址、高度、标题、放缩比例和初始页码等参数。我们可以通过修改这些参数来满足不同的展示需求。
最后，我们运行 React 项目，就可以在浏览器中看到我们的 PDF 文档了：
总结
本文介绍了如何使用 npm 包 finna-pdf-viewer 来展示 PDF 文档。我们首先介绍了如何安装和引入 finna-pdf-viewer，然后详细讲解了如何使用各种 props 来控制 PDF 阅读器的行为，最后给出了一个简单的示例代码，让大家更好地理解如何使用 finna-pdf-viewer。希望本文能够帮助大家快速了解 finna-pdf-viewer，从而更好地展示 PDF 文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006725b3660cf7123b363c0
