# cafe-pdf

> 使用 PDF.js 在 Vue页面渲染 pdf 文件。支持分页和缩放。

## 关于PDF.js中的API

`getDocument()`：用于异步获取PDf文档，发送多个Ajax请求以块的形式下载文档。它返回一个Promise，该Promise的成功回调传递一个对象，该对象包含PDF文档的信息，该回调中的代码将在完成PDf文档获取时执行。  
`getPage()`：用于获取PDF文档中的各个页面。  
`getViewport()`：针对提供的展示比例，返回PDf文档的页面尺寸。  
`render()`：渲染PDF。

## 安装

```shell
npm install cafe-pdf --save
```

## 使用
```js
import cafePdf from 'cafe-pdf'
Vue.use(cafePdf)
```

## Example
```vue
<template>
  <div class="box">
    <cafe-pdf ref="pdf" @on-loaded="load" @on-scroll="scroll" src="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf">
      <template slot="header">
        <button :disabled="current<=1" @click="gopage('pre')">上一页</button>
        <input readonly type="text" v-model="current">
        <button :disabled="current>=sum" @click="gopage('next')">下一页</button>
        <select v-model="scale" @change="setScale">
          <option value="auto">自动缩放</option>
          <option value="page-actual">实际大小</option>
          <option value="page-fit">适合页面</option>
          <option value="page-width">适合页宽</option>
          <option value="0.50">50%</option>
          <option value="0.75">75%</option>
          <option value="1">100%</option>
          <option value="1.25">125%</option>
          <option value="1.50">150%</option>
          <option value="1.75">175%</option>
          <option value="2">200%</option>
          <option value="3">300%</option>
          <option value="4">400%</option>
        </select>
      </template>
    </cafe-pdf>
  </div>
</template>

<script>
export default {
  name: 'pdf',
  data() {
    return {
      sum: null,
      scale: 1,
      current: 1
    };
  },
  components: {},
  methods: {
    load(val) {
      console.log(val);
      this.sum = val;
    },
    setScale() {
      this.$refs.pdf.zoom(this.scale);
    },
    scroll(val) {
      this.current = val;
    },
    gopage(type) {
      if (type == 'next') {
        this.$refs.pdf.changePage(++this.current);
      } else {
        this.$refs.pdf.changePage(--this.current);
      }
    }
  }
};
</script>

<style>
html,body{
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
.box {
  height: 100%;
  overflow: hidden;
}
</style>
```

## Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| src | pdf地址 | string | — | — |
| useOnlyCssZoom | 缩放模式为CSS | boolean | — | false |
| autoWidth | 初始化时是否将pdf缩放到容器宽度 | boolean | — | false |
| textLayerMode | 是否为文本模式渲染，0使用canvas，1使用文本模式 | number | 0/1 | 0 |

## Events
| 事件名 | 说明 | 参数 |
| ---- | ---- | ---- |
| on-loaded | 初始化事件 | 页码总数 |
| on-scroll | 滚动pdf时触发 | 当前页数 |

## Methods
| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| zoom | 缩放 | 缩放比例：`auto` |
| changePage | PDF翻页 | 页码 |


## Table Slot
| name | 说明 |
|------|--------|
| header | 头部插槽。 |
| footer | 尾部插槽。 |