O-Pdfjs

基于pdfjs实现的功能强大的pdf框架, 基于pdfjs/web/viewer.html, 可以用来开发pdf应用.

使用

// vite
import worker from '../../assets/files/pdf.worker.min.js?url';

import {createViewerInstance} from 'opdf';

// 初始化
const [pdfState, setPdfState] = useState<{
  loading: boolean;
  thumbnailUrl?: string;
}>();

const instance = createViewerInstance(PDF_VIEWER_ID, {
  pdf_url: pdfUrl,
  worker_url: worker,
  default_match: [...activeMatch],
  hasThumbnail: true,
});

instance.then((res: any) => {
  setPdfState({loading: res?.loading, thumbnailUrl: res?.thumbnailUrl});
});

// 左右联动
import {scrollView} from 'opdf';

// 滚动到指定位置
const scrollTo = (to: string) => {
  console.log('to', document.getElementById(PDF_VIEWER_CONTAINER_ID));
  scrollView({
    to,
    // scrollContainer未指定则默认为window
    scrollContainer:
        document.getElementById(PDF_VIEWER_CONTAINER_ID) || undefined,

  });
};
// Tsx
return (
    <div onClick={() => {scrollTo(`${list.text}_${list?.index}`)}}>
      {list?.text}
    </div>
)

功能

渲染等基础功能

• [x] 支持pdf渲染
• [x] 支持pdf文档缩放
• [ ] 支持pdf文档翻页
• [ ] 支持pdf文档搜索
• [ ] 支持pdf文档全屏
• [x] 支持pdf文档缩略图
• [x] 加载进度条
• [ ] ....

选中文字的功能

• [x] 支持选中文字后进行回调功能

鼠标悬浮后框选周边的文字

• [ ] 支持鼠标悬浮后框选周边的文字
• [ ] 生成图片提供下载、分享

高亮的联动和配置

• [x] 支持高亮的联动和配置

重要说明

• 相关的sdk文件下载 jsdelivr

M1相关无法本地启动的问题

pdfjs目前使用的node-canvas版本为有问题，但是在M1芯片的mac上，node-canvas无法正常启动，所以需要手动安装node-canvas，安装方法如下：

安装依赖

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

brew cleanup

rm -r node_modules/

npm install