pdf-preview-highlight

这是一个纯js的插件，实现PDF预览，引用内容高亮的功能，压缩pdf体积。因为是纯js，所以不挑框架vue2\vue3、react等框架都可使用。

背景

因为使用过几个vue3的pdf预览插件，都不好用，甚至有的插件pdf有500页内容它居然调起了500次网络请求，所以干脆自己造了一个。 注意：低版本浏览器白屏的话可能是兼容性问题，pdf-dist需要用legacy的版本。

Usage

需要在index.html先引入pdf-dist的2个js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.7.107/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.7.107/pdf.worker.min.js"></script>

然后下载包

npm i pdf-preview-highlight

vue3示例

<div class="pdf-wrap" ref="pdfViewerRef">

import PDFViewer, { IDomEnum, type PDFDocumentProxy, type IPDFViewer, type IOptions, type ILabelState } from 'pdf-preview-highlight'

const pdfViewerRef = ref()
let pdfViewer: IPDFViewer | null = null
const pdfState = reactive({
  pageNum: 1, // 当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
  width: 0, // pdf宽度
  height: 0, // pdf高度
})

watch(() => props.url, (newValue: string) => {
  if (newValue) {
    nextTick(() => {
      pdfViewer = new PDFViewer({
        url: newValue,
        container: pdfViewerRef.value,
        // domMethod: IDomEnum.VIRTUAL,
        initCallback: (pdf: PDFDocumentProxy) => {
          pdfState.numPages = pdf.numPages
        },
        pdfStateCallback: (state: any) => {
          pdfState.pageNum = state.pageNum;
        },
      })
    })
  }
}, {
  immediate: true
})

vue2、react 使用

同上面vue3使用方式，直接引入包 然后在页面初始化后、或者需要执行pdf展示的时机 new PDFViewer()就行

import PDFViewer from 'pdf-preview-highlight'
mounted() {
  new PDFViewer(config)
}
componentDidMount() {
  new PDFViewer(config)
}

压缩pdf体积（适用用户上传pdf文件到服务器，先压缩再上传的场景）

import { compressPdf } from 'pdf-preview-highlight'

/**
 * compressPdf：压缩PDF文件
 * @param file 要压缩的PDF文件对象。
 * @param range 图像质量的缩放比例，默认为0.6。
 * @param save 是否将压缩后的PDF保存到本地，默认为false。
 * @returns 返回一个Promise，解析为压缩后的PDF文件。
 */
const pdf = await compressPdf(file, 0.8, true)

API

// 初始化配置
const options: IOptions = {
  url: '', // pdf url
  container: '', // 容器的dom
  style: { // 高亮的样式，不传就默认是下面这个
    fill: "rgba(255, 236, 61, 0.2)",
    stroke: "#ffec3d",
    strokeWidth: "1",
  },
  // 页面加载pdf各个页面的加载方式，是个enum IDomEnum { ALL = 'whole',  VIRTUAL = 'virtual', SCROLL = 'scroll' } 
  // 如果配置domMethod: 'whole'就pdf所有页一次性插入container里面，domMethod: 'scroll'则初始加载可视窗口的几页滚动
  // 后才不断加载插入后续的页，domMethod: 'virtual'的话始终仅加载滚动可视窗口的几页，不传则默认是'scroll'
  domMethod,
  initCallback, // pdf 初始化回调获取总页数等
  pdfStateCallback, // 页码等数据变化的回调获取当前页码等
}
new PDFViewer(options)

// 上一页
pdfViewer.prePage()

// 下一页
pdfViewer.nextPage()

// 跳转到具体页面
pdfViewer.jumpPage(6)

// 内容高亮，如下：第六页内容高亮
const chunk_bboxes: ILabelState[] = [
  {
    "page": 6,
    "bbox": [
      42,
      69,
      268,
      90
    ]
  },
  {
    "page": 6,
    "bbox": [
      39,
      112,
      703,
      136
    ]
  },
]
pdfViewer.setHighlight(chunk_bboxes)

图示

后续功能

• [√] 使用虚拟列表优化
• [√] 增加pdf压缩体积功能