当我们在前端项目中需要展示 PDF 文件时，有很多选择。其中一个是使用 react-pdfobject npm 包。本文将介绍如何使用 react-pdfobject。
安装
在项目中使用以下命令安装 react-pdfobject：
--- ------- --------------- ------
使用
在你的 React 组件中，使用以下代码引入 react-pdfobject：
------ ----- ---- --------
------ --------- ---- ------------------
-------- ----- -
------ -
-----
----------
----------------------
------------
--------------
--
------
--
-
------ ------- ----url 属性指定要展示的 PDF 文件的路径。在上述示例中，你需要将 path/to/your/pdf 替换为你的 PDF 文件的路径。
width 和 height 属性可以指定 PDF 文件的宽度和高度。100% 使得 PDF 文件填满父元素的宽度，700px 确定 PDF 文件的高度。
可选配置
react-pdfobject 提供了一些可选的配置项。下面是一些例子：
pdfOpenParams
PDF Open 参数允许你通过 JavaScript 控制 PDF 文件打开时的处理方式。你可以使用以下代码设置 PDF Open 参数：
----------
----------------------
----------------
--------- ---------
-------- --
---------- --
--------- --
----------- --
----- -------
----- ----
--
--在这个例子中，我们设置了一些 PDF Open 参数：
pagemode属性设置 PDF 文件展示的视图模式。thumbs表示缩略图视图。toolbar属性设置是否显示 PDF 文件的工具栏。0表示不显示。statusbar,navpanes和scrollbars属性分别控制 PDF 文件的状态栏、导航面板和滚动条的显示与隐藏。view属性控制 PDF 文件的初始视图。FitV表示纵向铺满页面。zoom属性控制 PDF 文件的初始缩放比例。
更多的 PDF Open 参数可以在官方文档 中找到。
forcePDFJS
默认情况下，当浏览器支持 PDF 内嵌时，react-pdfobject 会优先使用内嵌方式展示 PDF 文件。如果你想强制使用 PDF.js 展示 PDF 文件，可以在组件中设置 forcePDFJS 属性为真。
---------- ---------------------- ----------------- --
containerProps
你可以使用 containerProps 属性自定义包含 PDF 文件的元素的样式和属性：
----------
----------------------
-----------------
------ - ------- ---- ----- ------- ------- ------ --
--- -----------------------
--
--fallbackLink
如果某些浏览器不支持内嵌 PDF 文件和 PDF.js，react-pdfobject 会为这些浏览器提供一个下载链接。你可以使用 fallbackLink 属性自定义这个链接。
---------- ---------------------- ---------------- -------------------------------- --- -------- --
总结
在这篇文章中，我们介绍了如何使用 react-pdfobject 模块展示 PDF 文件。同时，我们介绍了一些可选的配置项，例如 PDF Open 参数、强制使用 PDF.js 展示等。如果你需要展示 PDF 文件，react-pdfobject 是一个不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672693660cf7123b3674a