cdd-pdf-view/README.md

该组件库基于`pdf-dist`库，能够把 pdf 文件解析成图片放置到指定的容器 dom 中。

# cdd-pdf-view

该组件库基于`pdf-dist`库，能够把 pdf 文件解析成图片放置到指定的容器 dom 中。

## 开始安装 setup

```shell
npm install cdd-pdf-view
```

## 组成

1. cddPdfView

   预览 pdf 的 ui 组件。

2. CddPdf

   解析 pdf 的类

## cddPdfView

### props

1. file:File file 对象

2. url:string

url 可以是

1. 下载 pdf 的路径，该组件能够自动下载解析 pdf。
2. file data url，可以把 dataurl 直接解析成要预览的图片。

## CddPdf/PdfView

旧名：PdfView，防止命名混淆，已更改。（现在依旧可用）

CddPdf 是一个单独的解析 pdf 的类。

### 属性

- file:File 文件，创建时传入的。
- url:string 地址，流的完整地址。
- imgs:string[] 使用`cddPdf.getPdf(params)`解析完后，可用于预览的图片地址。
- isBlobUrl:Boolean 预览地址是否为 blob 连接。
- promise: Promise<any> 等待解析时的 promose 属性
- options 配置项

  - options.scale:number 图片质量，默认 2。

## 方法

### 静态方法`GetPdf`

GetPdf(params):Promise<PdfView>

直接生成一个 CddPdf 对象。

参数：params:Object

- url:string 可选 用来下载的 url 字符串
- file:File 可选 pdf 文件对象
- options 可选 配置项
- isBlob 可选，是否是 blob 形式
  - scale:number 分辨率，默认为视口的 2 倍

返回：Promise\<PdfView\>即 PdfView 实例。

一个把 pdf 文件解析到图片进行预览的库。
如果 pdf 包含多页内容，那么可以解析成多个图片。

## 用法 useage 全局注册组件

eg：

```js
import Vue from 'vue'
import cddPdfView from 'cdd-pdf-view'
import 'cdd-pdf-view/dist/cddPdfVue.css'

Vue.use(cddPdfView) //之后'cdd-pdf-vue'全局组件就可以用了。
```

## 自定义组件引入名称

```js
/* 
如果想要自定义pdf的名字，那么使用Vue.use(pdfView,{name:'pdf-view'})
此方法全局注册为pdf-view名字
 */
import { cddPdfView } from 'cdd-pdf-view'
import 'cdd-pdf-view/dist/cddPdfVue.css'

Vue.use(cddPdfView, { name: 'pdf-view' })
```

## 非全局注册

如果在 x.vue 文件中使用该组件，则直接引入当作平常组件使用即可。

## 浏览器使用

1. 引入 dist/cddPdfVue.css。
2. 在浏览器中，先引入 vue 之后引入 dist/cddPdfVue.umd.min.js

那么会自动注册到全局中。

名字:'cdd-pdf-view'

---

## 类 PdfView 的使用

使用下面的方法除了会引入全局`cdd-pdf-view`组件外也会引入`$CddPdf`类，该类可以用来解析 pdf 文件。可用来进行自定义开发。

```js
import { cddPdfView } from 'cdd-pdf-view'
Vue.use(cddPdfView) //此时全局会有cdd-pdf-view组件和this.$CddPdf类属性
```

### 单独胡引入

```js
import { CddPdf } from 'cdd-pdf-view'
//使用
let pdf = CddPdf.GetPdf({
  file: File,
})

pdf.promise.then(() => {
  console.log(pdf.imgs) //解析完毕
})
```

_注：file 和 url 虽然都是可选但是必选其一。_

PdfView 实例：

如下所示

```ts
interface PdfView{
  imgs:string[]
  file?:File
  url?:string
  promise?:Promise<PdfView>
  isBlob:boolean
  options:{
    scale:number
  }
}
}
```

示例：

```js
PdfView.GetPdf({
  url:
    'http://gw-dev.jiangtai.com/jtpf/res-svc/res/v3/download?fileId=2095220252559543043&free=1',
}).then((pdfView) => {
  console.log(`图片是`, pdfView.imgs)
})
```