pdfview-dist v1.1.0

pdfview-dist

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

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

安装

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

npm 安装方式

npm install pdfview-dist

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

script 标签安装方式

• 引入js

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

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

<link rel="stylesheet" href="pdfview-dist/dist-umd/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-umd/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

options

watermark

事件

函数方法

vite 项目中使用

在 vite 项目中使用时，若想直接使用js文件时，需要通过pdfview-dist/dist-esm/index.js 的方式进行引用。

若通过npm包的方式引用时，则不需要考虑 dist-esm 文件夹，直接使用pdfview-dist 即可。

兼容性：

依赖