介绍
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