@matpool/vue-pdf

vue-pdf

vue.js pdf viewer

安装

yarn add @matpool/vue-pdf
yarn add -D worker-loader # 由于 pdfjs 依赖 webworker, vue cli 项目请安装 worker-loader

示例

<template>
  <pdf-viewer file="http://example.com/example.pdf">
    <template v-slot="{ pages }">
      <pdf-page
        v-for="(page, i) in pages"
        :key="i"
        :page="page"
      />
    </template>
  </pdf-viewer>
</template>

<script>
import { PdfViewer, PdfPage } from '@matpool/vue-pdf'
import '@matpool/vue-pdf/dist/vue-pdf.css'

export default {
  components: {
    PdfViewer,
    PdfPage
  }
}

PdfViewer

用于解析 pdf 文件, 通过 slot 分发相关属性给 PdfPage 组件

props

属性	类型	说明
file	File/string	pdf 文件的 File 对象或者 url

slot attribute

属性	类型	说明
pdf	PDFDocumentProxy	pdfjs 解析 pdf 的结果
pages	Array<PDFPageProxy>	pdfjs 解析每一页 pdf 的结果

events

属性	data	说明
load	PDFDocumentProxy	pdf 解析完成事件
error	Error	pdf 解析失败事件

PdfPage

渲染 pdf 的一页的内容

props

属性	类型	说明
page	PDFPageProxy	-
text	boolean	是否渲染文本层
size	cover/contain/default	cover 按照 pdf 原尺寸与父容器长宽比较大的缩放, contain 按照较小的缩放, default 则按照原始 pdf 大小渲染