# pdf-previewer

**Repository Path**: crazy_about_programming/pdf-previewer

## Basic Information

- **Project Name**: pdf-previewer
- **Description**: flipbook仿电子书预览的插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-20
- **Last Updated**: 2025-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
typora-root-url: public
---

# pdf-previewer

## 效果图

![](/demo.png)

## Project setup

```
npm install pdf-previewer
```

### 使用方法

**全局注册**

```js
import PdfPreviewer from 'pdf-previewer'
import 'pdf-previewer/dist/pdf-previewer.css'
Vue.use(PdfPreviewer)
```

**局部注册**

```js
<script>
  import PdfPreviewer from 'pdf-previewer'
  import 'pdf-previewer/dist/pdf-previewer.css'
  export default {
      name:'xxx',
      components:{PdfPreviewer}
  }
</script>
```

**在项目中使用**

```vue
<template>
 <div>
     <button @click="openPdf">预览</button>
     <pdf-previewer ref="pdfRef" :file="fileObj" />
 </div>
</template>
<script>
  import PdfPreviewer from 'pdf-previewer'
  import 'pdf-previewer/dist/pdf-previewer.css'
  export default {
      name:'xxx',
      components:{PdfPreviewer},
      data(){
          return {
              fileObj:{
                  fileName:'xxxx',filePath:'xxxxx'
              }
          }
      }
      methods:{
          openPdf(){
              this.$nextTick(()=>{
                  this.$refs.pdfRef.openPDF()
              })
              
          }
      }
  }
</script>
```



### 配置项
| 属性 | 类型   | 默认值                                                       |
| ---- | ------ | ------------------------------------------------------------ |
| file | Object | {    fileName:'turnjs4-api-docs.pdf',<br/>     filePath:'/turnjs4-api-docs.pdf'<br/>} |
|      |        |                                                              |