介绍
zerocar-preview 是一个可以方便快捷地在前端页面中实现 PDF 预览的 npm 包。它可以对 PDF 进行缩放、翻页、搜索,并支持自定义主题和文本高亮等功能。它还可以通过配置实现本地以及远程 PDF 文件的预览。使用 zerocar-preview,你可以在你的项目中快速、方便地显示 PDF 文件,为项目的优化提供帮助。
安装
你可以通过 npm 安装 zerocar-preview:
npm install zerocar-preview
或者使用 yarn 安装:
yarn add zerocar-preview
使用
首先,在项目中引入 zerocar-preview:
import {PDFPreview} from "zerocar-preview";
然后,在页面中创建一个容器来显示 PDF 文件:
<div id="pdfPreview"></div>
接下来,初始化 PDFPreview 并传入需要预览的 PDF 文件路径:
const preview = new PDFPreview(); preview.setFile("/path/to/pdf/file.pdf", "#pdfPreview");
然后,你就可以开始放心愉快地使用了。
配置项
PDFPreview 还支持一些额外的配置项帮助你更好地掌控和个性化你的预览:
zoomStep
控制放大缩小的步长。单位为百分比。默认值为 10。例如,如果你的 zoomStep 设置为 10,那么每次的放大/缩小就是增加/减少 10%。
const preview = new PDFPreview({ zoomStep: 20, });
pageStep
控制上下页切换的步长。默认值为 1。如果你设置为 2,在每次连续翻页时,你将会跳过下一页并立即转到下下一页。
const preview = new PDFPreview({ pageStep: 2, });
searchHighlightColor
搜索结果的高亮颜色。默认值为 "rgba(255, 255, 0, 0.5)"。
const preview = new PDFPreview({ searchHighlightColor: "rgba(0, 255, 0, 0.5)", });
theme
主题配色方案。默认为 "default"。你可以使用内置的主题,比如 "light" 或 "dark",或者自己定义一个主题方案。定义新的主题方案,只需要在预览页面中添加一个新的样式表。
const preview = new PDFPreview({ theme: "dark", });
password
如果你需要预览一个需要密码的 PDF 文件,你可以在调用 setFile 前使用 setPassword 方法设置密码即可。
const preview = new PDFPreview(); preview.setPassword("pdfPassword"); preview.setFile("/path/to/pdf/file.pdf", "#pdfPreview");
previewMode
PDF 预览模式,在大多数情况下,这个值应该保持为 "pdf.js"。如果你想更换预览框架,可以将 previewMode 设置为 "google",然后将 optionalScripts 可选参数设置为 Google PDFViewer 使用的相关脚本。
const preview = new PDFPreview({ previewMode: "google", optionalScripts: [ "https://www.gstatic.com/docs/viewer/js/viewer.js", "https://www.gstatic.com/docs/viewer/js/viewer_properties.js", ], });
示例
-- -------------------- ---- ------- ------ ------------ ---- ------------------ ----- ------- - --- ------------ --------- --- --------- -- --------------------- -------- ---- -- ------ ------ ------- --- ----------------------------------- ---------------------------------------- ---------------展开代码
<div id="pdfPreview"></div>
总结
zerocar-preview 是一个方便、易用的 npm 包,它可以让你在你的前端项目中快速、方便地实现 PDF 预览,并且拥有很多个性化配置选项。我们相信,在你使用 zerocar-preview 后,将会极大地提升你的项目易用性和用户体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b6051ab1864dac672b2