npm 包 zerocar-preview 使用教程

阅读时长 5 分钟读完

介绍

zerocar-preview 是一个可以方便快捷地在前端页面中实现 PDF 预览的 npm 包。它可以对 PDF 进行缩放、翻页、搜索,并支持自定义主题和文本高亮等功能。它还可以通过配置实现本地以及远程 PDF 文件的预览。使用 zerocar-preview,你可以在你的项目中快速、方便地显示 PDF 文件,为项目的优化提供帮助。

安装

你可以通过 npm 安装 zerocar-preview:

或者使用 yarn 安装:

使用

首先,在项目中引入 zerocar-preview:

然后,在页面中创建一个容器来显示 PDF 文件:

接下来,初始化 PDFPreview 并传入需要预览的 PDF 文件路径:

然后,你就可以开始放心愉快地使用了。

配置项

PDFPreview 还支持一些额外的配置项帮助你更好地掌控和个性化你的预览:

zoomStep

控制放大缩小的步长。单位为百分比。默认值为 10。例如,如果你的 zoomStep 设置为 10,那么每次的放大/缩小就是增加/减少 10%。

pageStep

控制上下页切换的步长。默认值为 1。如果你设置为 2,在每次连续翻页时,你将会跳过下一页并立即转到下下一页。

searchHighlightColor

搜索结果的高亮颜色。默认值为 "rgba(255, 255, 0, 0.5)"。

theme

主题配色方案。默认为 "default"。你可以使用内置的主题,比如 "light" 或 "dark",或者自己定义一个主题方案。定义新的主题方案,只需要在预览页面中添加一个新的样式表。

password

如果你需要预览一个需要密码的 PDF 文件,你可以在调用 setFile 前使用 setPassword 方法设置密码即可。

previewMode

PDF 预览模式,在大多数情况下,这个值应该保持为 "pdf.js"。如果你想更换预览框架,可以将 previewMode 设置为 "google",然后将 optionalScripts 可选参数设置为 Google PDFViewer 使用的相关脚本。

示例

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

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

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

总结

zerocar-preview 是一个方便、易用的 npm 包,它可以让你在你的前端项目中快速、方便地实现 PDF 预览,并且拥有很多个性化配置选项。我们相信,在你使用 zerocar-preview 后,将会极大地提升你的项目易用性和用户体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b6051ab1864dac672b2

纠错
反馈

纠错反馈