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 大小渲染 |