大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 PDFSlick

PDFSlick 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 (
    <div className="absolute inset-0 pdfSlick">
      <div className="relative h-full">
        <PDFSlickViewer {...{ viewerRef, usePDFSlickStore}} />

        <PDFNavigation {...{ usePDFSlickStore}} />
        <div className="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 class="absolute inset-0 bg-slate-200/70 flex flex-col pdfSlick">
      <div class="flex-1 relative h-full">
        <PDFSlickViewer {...{ store, viewerRef}} />
      </div>
    </div>
  );
};
export default PDFViewerApp;

更多关于 PDFSlick 的用法和示例可以参考文末资料，本文不再过多展开

参考资料

https://github.com/pdfslick/pdfslick

https://pdfslick.dev/docs/solid

https://pdfslick.dev/examples