@pzy915/pdf-preview

作用

基于 ts 和 pdfjs-dist 封装一个 pdf 预览组件

支持特性/解决的问题

• 分页渲染
• 完整渲染
• 按需渲染
• 支持以扩展的方式增加水印
• 解决旧版本浏览的兼容问题

详细文档 pdf 预览组件

安装

pnpm add [email protected]
pnpm add @pzy915/pdf-preview

因为使用该组件需要配置workerSrc和cMapUrl, 所以，并未将[email protected]本身打包进该组件，因此您需要在自己向项目中安装[email protected], 并按如下方式配置到你的公共静态资源目录

获取workerSrc, cMapUrl对应的资源

如下配置方式是基于VITE项目的配置, VITE的公共静态资源是PROJECT_ROOT/public目录，请根据您项目的实际情况放置在对应目录

1. 拷贝 node_modules/pdfjs-dist/build, node_modules/pdfjs-dist/build/cmaps 两个文件夹到你项目的PROJECT_ROOT/public/pdfjs-dist-res文件夹

pdfjs-dist-res这个文件夹名字可随意更改，只要在使用组件的方法时配置成您对应的路径名字即可

初始化

import {
  PdfjsDistConfigType,
  pdfPreviewBuilder,
  PdfPreviewConfig,
} from '@pzy915/pdf-preview'

export const baseUrl = '/pdf-preview-wk/'
const pdfjsDistRes = 'pdfjs-dist-res'
const workerSrc = `${baseUrl}${pdfjsDistRes}/build/pdf.worker.min.js`
const cMapUrl = `${baseUrl}${pdfjsDistRes}/cmaps`

const pdfjsDistConfig: PdfjsDistConfigType = {
  workerSrc,
  cMapUrl,
}

const pdfPreview = pdfPreviewBuilder(pdfjsDistConfig)