pdfview-dist

在移动端 h5 能够直接通过使用 标签来展示 pdf 阅读器功能的组件

也可在项目中通过new PdfViewLib() 的方式调用

安装

支持 script 标签安装和 npm 安装方式

npm 安装方式

npm install pdfview-dist

具体使用方法参考使用方法

script 标签安装方式

• 引入js

<script src="pdfview-dist/index.js" type="text/javascript" charset="utf-8"></script>

• 引入css（仅在使用模块调用模式需要）

<link rel="stylesheet" href="pdfview-dist/dist/index.css" />

• 注册组件

// 可全局注册对应组件
PdfViewRegistry('pdf-view')

具体使用方法也可参考使用方法

使用方式

本模块模块提供了2种使用方式，支持一些不支持使用 webComponent 的 场景

方式1: webcomponent 组件注册模式

import { PdfViewRegistry } "pdfview-dist"
// 注册自定义组件名
PdfViewRegistry('pdf-view')

在页面中正常使用

<pdf-view source="http://xxx.pdf"></pdf-view>

方式2:模块调用模式

方式2需要额外加载 css 文件

import { PdfViewLib } "pdfview-dist";
import 'pdfview-dist/dist/index.css';

在页面中正常使用

<div id="pdf-com"></div>

const pdfViewLib = new PdfViewLib('#pdf-com', {
  source: this.source,
  maxZoom: 5,
  height: 200,
})

pdfViewLib.on('progress', (data) => {
  console.log('progress', data)
})
pdfViewLib.on('readFinish', (data) => {
  console.log('readFinish', data)
})
pdfViewLib.on('error', (data) => {
  console.log('error', data)
}) 

示例

若使用了 webComponent 标准的组件模式，在使用时需要在工程中配置编译时忽略编译，避免编译时出现 warning。 如 vue 环境中，可在 beforeCreate 中忽略 pdf-view 的编译：

const App = {
  beforeCreate() {
    Vue.config.ignoredElements.push('pdf-view')
  }
}

按需加载

若按需加载组件，如只在某个页面中使用，由于 pdf 组件在弱网环境下，加载较慢。为了更好的体验，可以使用加载状态的占位符和渲染条件判断，来控制 pdf 组件的显示

// template
// 调用模式组件
<div id="pdf-com"></div>
// 自定义组件
<pdf-view v-if="componentLoaded" :source="source" height="400"></pdf-view>
<loader v-if="!componentLoaded" ></loader>


// js
created() {
      // 具体参数参考 https://webpack.js.org/api/module-methods/#magic-comments
    import(
    /* webpackChunkName: "pdfview-dist" */
    /* webpackPrefetch: true */
    "pdfview-dist").then(module => {
      // webcomponent 组件注册模式
      module.PdfViewRegistry('pdf-view')
      this.componentLoaded = true
      // 模块调用模式
      const pdfViewLib = new module.PdfViewLib('#pdf-com', {
        source: this.source,
        maxZoom: 5,
        height: 200,
      })

      pdfViewLib.on('progress', (data) => {
        console.log('progress', data)
      })
      pdfViewLib.on('readFinish', (data) => {
        console.log('readFinish', data)
      })
      pdfViewLib.on('error', (data) => {
        console.log('error', data)
      })
    });
},

API接口方法

API

属性	类型	默认值	必填	说明
source	string/ArrayBuffer	''	是	pdf资源，支持http协议或ArrayBuffer 类型数据
width	number		否	组件宽度，默认100%
height	number		否	组件高度，默认100%
limit	number		否	分片渲染 pdf 的最大页数, 默认10
cmap-url	string		否	字体的cmaps文件夹路径，如 https://unpkg.com/[email protected]/cmaps/
hide-page-num	boolean	false	否	不展示左上角页码
hide-back-top	boolean	false	否	不展示右下角回到顶部按钮
scale	number	1	否	当前展示倍数，默认1倍
max-zoom	number	2	否	双击缩放倍数，范围1+
zoom-disabled	boolean	false	否	是否关闭双击缩放
page-id-prefix	string		否	pdf 页面元素的 id 前缀

事件

事件名	出参	说明
readFinish	{ finishReading: boolean }	是否已完成阅读事件
numUpdate	{ currentNum: number }	当前阅读到的页码更新事件
progress	{ progress: number }	pdf 加载进度事件
ready	{ title: string （pdf 标题）, totalPage: number （总页码） }	pdf 加载完成事件
error	{ code: number, message: 错误提示 }	是否已完成阅读事件

函数方法

方法名	入参	传参取值	说明
setZoom	Boolean	默认为false	控制双击缩放功能
goto	Number		跳转第几页
clearPdf			清除 pdf 渲染内容

兼容性：

系统	版本	说明
ios	11.1+	-
andriod	8.1+	-
chrome	78+	-
safari	11.1+	-

依赖

插件名	版本	说明
pdfjs-dist	2.5.207	-