vue-pdf-embed

一个 基于 vue 的 pdf 预览插件.

https://www.npmjs.com/package/vue-pdf-embed

适用于 Vue2 和 Vue3.

采用的 Canvas 绘制显示的 pdf 文件

特点

  • 在 Vue 项目中控制渲染 PDF 文档.
  • 处理受保护文档的密码
  • 包含文本层 (支持搜索与选中)
  • 包含注解层 (注解与链接)
  • 无其他依赖与配置
  • 可直接运行与浏览器

能力

同时支持 Vue2 和 Vue3, 但模块是单独编译的. 整个模块基于 Vue3 开发, Vue2 需要引用 dist/vue2-pdf-embed.js.

vue2 的用法暂略.

安装

npm install vue-pdf-embed@1 
# 或者
yarn add vue-pdf-embed@1

在浏览器中

<script src="https://unpkg.com/vue-pdf-embed@1"></script>

用法

<template>
  <div>
    <h2>直接使用访问返回文件流的 URL</h2>
    <vue-pdf-embed :source="pdfurl" />
    <h2>使用 base64 格式的字符串</h2>
    <vue-pdf-embed :source="pdfbase64" />
  </div>
</template>
<script lang="ts" setup>
import VuePdfEmbed from 'vue-pdf-embed'
// vue2 中导入模块使用
// import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
import { ref } from 'vue'
const pdfurl = ref<string>("url ...")
const pdfbase64 = ref<string>("data:application/pdf;base64,<base 64 字符串>")
</script>

默认加载 PDF 文档, 对于多页的 PDF 也是平铺, 全部显示与页面中.

属性

属性名类型可取值描述
annotationLayerbooleantrue 或 false是否启用注解层.
widthstring 或 number自然数指定 pdf 预览的宽度. 以像素为单位.
heightstring 或 number自然数指定高度, 单位像素. 若指定了 width 属性, 则忽略该属性值.
imageResourcesPathstringURL 或路径用于注解层的 icon 图标路径.
pagenumberpdf 显示的页码用于控制显示的 pdf 页码, 若不指定会显示整个 pdf 文件.
rotationnumber0, 90, 180, 或 270 (90 的倍数)控制页面旋转角度.
scalenumber有理数用于控制绘图比例 (canvas)
sourcestring, object, Unit8Arraypdf 源
textLayerboolean是否显示文本层

height 设置后, 控制的是每页 PDF 的高度.

启用注解会产生一个鼠标悬浮可显示的块, 但是存在字符乱码问题. 并且会加载很慢.

imageResourcesPath 指定的是多个图标, 官方给出了一个参考: https://unpkg.com/browse/pdfjs-dist@4.0.189/web/images/ (但是太慢):

image-20231120113651993

但是给 imageResourcesPath 设置后依旧无效果.

文本层 (textLayer) 和注解层 (annotationLayer) 是在 Canvas 基础上添加两个 div 实现的.

image-20231120111750603

事件

名字值 (事件处理函数的参数)描述
internal-link-clicked目标页面页码内部连接被点击时.
loadedPDF 文档代码加载文档完成后触发.
loading-failed错误对象加载文档失败时触发.
password-requested回调函数, 重试标记.需要密码才可以显示文档.
progress过程对象参数跟踪文档加载过程.
rendered-文档渲染完成.
rendering-failed错误对象文档渲染失败.

该库的 Type 类型描述不完整, 事件名没有智能提示.

image-20231120150433607

这些事件名可以直接使用. 但是不会提示.

插槽

名字属性值描述
after-pagepage (页码)附加在渲染 pdf 的后面的节点
before-pagepage (页码)附加在渲染 pdf 的前面的节点

image-20231120150936454

渲染的结果为:

image-20231120151001323

结合 AntdVue 来演示

公共方法

方法名参数描述
download文件名(string)下载该文档. 并使用该名字作为文件名.
print分辨率, 文件名, 是否打印所有页面打印该文档
render手动渲染

手动渲染可以考虑在页面发生变化时重新渲染.

但是手动渲染不可使用现有的 canvas, 需要再创建 canvas, 这个操作需要深入内部进行二开.

使用公共方法需要利用 ref 获得组件引用. 由于该库的作者没有完整的编写类型描述, ref 使用 any 即可.

<VuePdfEmbed 
  :source="pdfSource" 
  :width="600" 
  ref="pdf"
  :page="current"
  @loaded="loaded"
></VuePdfEmbed>
...
const pdf = ref()

静态方法

除了组件本身, 该模块还包括一个 getDocument 函数, 用于手动加载 PDF 文档, 然后可以将其用作组件的源 prop. 细节需要阅读源文件.

Last Updated:
Contributors: jk