@meinenghua/pdf-viewer

pdf-viewer

Project setup

yarn install

Compiles and hot-reloads for development

yarn dev

详细使用见example 文件夹

npm @meinenghua/pdf-viewer

yarn add @meinenghua/pdf-viewer

import { PdfViewer, constant } from ' @meinenghua/pdf-viewer'
// create instance
const instance = new PdfViewer({
      el // el 可以为一个html DOM 或者 一个 HTML DOM 的 id
    })
// 加载pdf 
const url = "https://example.com/file/preview/example.pdf"
await instance.loadPdf(url)
// 移除pdf
instance.removePdf()
// 获取pdf 页数
 const totalPage = instance.totalPage
 // 渲染pdf
await instance.render()

// 缩小
instance.zoomOut()
//　放大
instance.zoomIn()

// 跳转到某页
instance.jumpToPage(1) // 从1开始

// 注册事件 
const eventHandle = (event) =>{

}
instance.registerEvent('eventName', eventHandle)
// 目前支持event 如下 
// pageChange
// onSelect
// endSelect
// startSelect
// mousemove

// 注册图层
import { BaseLayer, BasePdfHtmlLayer} from ' @meinenghua/pdf-viewer'
// 默认注册了 PdfParagraphLayer, SelectTextLayer 两个类型 都继承自 BasePdfHtmlLayer，BasePdfHtmlLayer继承 BaseLayer
// LayerConstructor  必须继承自 BaseLayer 
instance.registerOverlayer([LayerConstructor])
// 添加图层
instance.addOverlayerConfig(pageIndex,[
  {
    layerName: 'PdfParagraphLayer',　//　layer构造函数的名字
    options: {
      id: 1,// 必填值
      width: 1090,
      height: 280,
      pageWidth: 1450,
      pageHeight: 1024,
      left: 180,
      top: 250,
      text: '111',
      highlightStyle: { //触发高亮的样式
        opacity: 0.5,
        background: '#00ccFF'
      },
      style: { //css 默认样式
        opacity: '0'
      },
      data: { // 自定义data
      }
    }
  }
])//pageIndex 从1开始

// 高亮图层 
instance.highlight(highlightId) //highlightId可以是数组或者字符串
//高亮的图层类必须实现highlight 方法

// 取消 高亮图层 
instance.cancelHighlight(highlightId) //highlightId可以是数组或者字符串
//高亮的图层类必须实现cancelHighlight 方法