在前端开发中，我们经常需要使用 PDF 文件进行展示，同时还需要能够旋转页面。这时，npm 包 react-pdf-viewer-with-rotate 就会成为我们不可或缺的工具之一。本文将详细介绍如何使用这个库。
安装
首先，我们需要安装这个库。可以使用 npm 或 yarn 进行安装：
npm install react-pdf-viewer-with-rotate --save
yarn add react-pdf-viewer-with-rotate
使用
使用 react-pdf-viewer-with-rotate，我们需要先引入 PDF 文件：
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import pdfFile from './sample.pdf';其中，pdfFile 是我们需要引入的 PDF 文件路径。 接下来，我们就可以在组件中使用 react-pdf-viewer-with-rotate 了。示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- ---- - ---- -----------------------------------
------ ------- - ------ - ---- -------------------------------
------ ------- ---- ---------------
----- --- - -- -- -
----- ---------- ------------ - ---------------
----- ------------ -------------- - ------------
----- --------------------- - -- -------- -- -- -
----------------------
--
------ -
--
------- ------------------------------
------- ----------------- --
---------
---------
--------------
-------------------------------------
---------------------------
-
----- ----------------------- --
-----------
---
---- ------------ -- ----------
----
-------
-------------
-------------------- -- --
----------- -- ------------------------ - ---
-
--------
---------
-------
-------------
-------------------- -- ---------
----------- -- ------------------------ - ---
-
----
---------
---
--
--
------ ------- ----在上面的代码中，我们使用了 Viewer 组件来展示 PDF 文件，并在上方添加了 Worker 组件，用于加载 pdf.worker.min.js 文件。同时，我们还使用了 Document 和 Page 组件来控制到哪一页以及当页页面数量。
旋转页面
接下来，我们来考虑如何实现旋转页面的功能。react-pdf-viewer-with-rotate 集成了一个名为 PageRotation 的组件，可用于旋转页面。示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- ---- - ---- -----------------------------------
------ ------- - ------- ------------ - ---- -------------------------------
------ ------- ---- ---------------
----- --- - -- -- -
----- ---------- ------------ - ---------------
----- ------------ -------------- - ------------
----- --------------------- - -- -------- -- -- -
----------------------
--
------ -
--
------- ------------------------------
------- ------------------
------------- --
---------
---------
---------
--------------
-------------------------------------
---------------------------
-
----- ----------------------- --
-----------
---
---- ------------ -- ----------
----
-------
-------------
-------------------- -- --
----------- -- ------------------------ - ---
-
--------
---------
-------
-------------
-------------------- -- ---------
----------- -- ------------------------ - ---
-
----
---------
---
--
--
------ ------- ----在上面的代码中，我们在 Viewer 组件中添加了 PageRotation 组件，用于实现页面旋转的功能。用户可以通过点击上述组件中的旋转按钮实现页面的旋转。
总结
react-pdf-viewer-with-rotate 是一个非常实用的库，可用于展示 PDF 文件并支持页面旋转功能。本文详细介绍了如何使用这个库以及添加旋转功能，相信读者已经可以充分掌握这个库的知识了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669a81e8991b448e2d26