open-index/open-npm huggingface dataset:
npm package: @matpool/vue-pdf
Description: vue.js pdf viewer
Latest version: 0.1.0

# vue-pdf

vue.js pdf viewer

## 安装

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

## 示例

```vue
<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](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFDocumentProxy.html) | pdfjs 解析 pdf 的结果       |
| pages | Array<[PDFPageProxy](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFPageProxy.html)>  | pdfjs 解析每一页 pdf 的结果 |

### events

| 属性  | data                                                                                                 | 说明             |
| ----- | ---------------------------------------------------------------------------------------------------- | ---------------- |
| load  | [PDFDocumentProxy](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFDocumentProxy.html) | pdf 解析完成事件 |
| error | Error                                                                                                | pdf 解析失败事件 |

## PdfPage

渲染 pdf 的一页的内容

### props

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