npm 包 react-pdfobject 使用教程

阅读时长 4 分钟读完

当我们在前端项目中需要展示 PDF 文件时,有很多选择。其中一个是使用 react-pdfobject npm 包。本文将介绍如何使用 react-pdfobject。

安装

在项目中使用以下命令安装 react-pdfobject:

使用

在你的 React 组件中,使用以下代码引入 react-pdfobject:

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

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

------ ------- ----
展开代码

url 属性指定要展示的 PDF 文件的路径。在上述示例中,你需要将 path/to/your/pdf 替换为你的 PDF 文件的路径。

widthheight 属性可以指定 PDF 文件的宽度和高度。100% 使得 PDF 文件填满父元素的宽度,700px 确定 PDF 文件的高度。

可选配置

react-pdfobject 提供了一些可选的配置项。下面是一些例子:

pdfOpenParams

PDF Open 参数允许你通过 JavaScript 控制 PDF 文件打开时的处理方式。你可以使用以下代码设置 PDF Open 参数:

-- -------------------- ---- -------
----------
  ----------------------
  ----------------
    --------- ---------
    -------- --
    ---------- --
    --------- --
    ----------- --
    ----- -------
    ----- ----
  --
--
展开代码

在这个例子中,我们设置了一些 PDF Open 参数:

  • pagemode 属性设置 PDF 文件展示的视图模式。thumbs 表示缩略图视图。
  • toolbar 属性设置是否显示 PDF 文件的工具栏。0 表示不显示。
  • statusbar, navpanesscrollbars 属性分别控制 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

纠错
反馈

纠错反馈