大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 PDFSlickPDFSlick is a library that enables viewing of and interaction with PDF documents in React, SolidJS, Svelte and JavaScript apps. It's build on top of Mozilla's PDF.js, and utilises Zustand to provide a reactive store for the loaded documents.
PDFSlick 是一个库，可以在 React、SolidJS、Svelte 和 JavaScript 应用程序中查看 PDF 文档并与之交互。PDFSlick 构建在 Mozilla 的 PDF.js 之上，并利用 Zustand 为加载的文档提供反应式存储。
PDF.js 虽然很优秀而且非常稳定和成熟，其也是 Mozilla Firefox 中的 PDF 查看器，自 2011 年以来一直存在。然而，其完全是 Vanilla JavaScript，当涉及到在现代 JS 库（如 React 和 SolidJS）中使用时仍然有诸多不足。
PDFSlick 试图将所有这些有用的功能包装成一个更容易适应 React 和 SolidJS 世界的功能，最终作为组件和反应存储。
目前 PDFSlick 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。
如何使用 PDFSlick首先需要安装依赖：
npm install @pdfslick/react// yarn add @pdfslick/react// pnpm add @pdfslick/react开发者可以通过 usePDFSlick() Hooks 开始使用 PDFSlick，如以下基本示例所示：
import {usePDFSlick} from "@pdfslick/react";import PDFNavigation from "./yourcomponents/PDFNavigation";import "@pdfslick/react/dist/pdf_viewer.css";type PDFViewerComponentProps = { pdfFilePath: string,};const PDFViewerComponent = ({pdfFilePath}: PDFViewerComponent) => { const {viewerRef, usePDFSlickStore, PDFSlickViewer} = usePDFSlick( pdfFilePath, { scaleValue: "page-fit", } ); const scale = usePDFSlickStore((s) => s.scale); const numPages = usePDFSlickStore((s) => s.numPages); const pageNumber = usePDFSlickStore((s) => s.pageNumber); return ( <divName="absolute inset-0 pdfSlick"> <divName="relative h-full"> <PDFSlickViewer {...{ viewerRef, usePDFSlickStore}} /> <PDFNavigation {...{ usePDFSlickStore}} /> <divName="absolute w-full top-0 left-0"> <p>Current scale: {scale}</p> <p>Current page number: {pageNumber}</p> <p>Total number of pages: {numPages}</p> </div> </div> </div> );};export default PDFViewerComponent;提供 PDF 文档路径和 PDFSlick 选项对象后，usePDFSlick() Hooks 将返回一个对象，该对象由以下各项组成（除其他内容外）：
PDFSlickViewer 是用于查看 PDF 文档的 PDF 查看器组件viewerRef 是作为 组件的 prop 提供的 ref 回调usePDFSlickStore 允许在 React 组件中使用 PDFSlick 存储同时，在 SolidJS 中使用也非常简单，比如下面的示例：
import {Component, createSignal} from "solid-js";import {usePDFSlick} from "@pdfslick/solid";type PDFViewerAppProps = { pdfFilePath: string,};const PDFViewerApp: Component<PDFViewerAppProps> = ({ pdfFilePath }) => { const { viewerRef, pdfSlickStore: store, PDFSlickViewer, } = usePDFSlick(pdfFilePath); return ( <div>更多关于 PDFSlick 的用法和示例可以参考文末资料，本文不再过多展开参考资料https://github.com/pdfslick/pdfslick
https://pdfslick.dev/docs/solid
https://pdfslick.dev/examples
