一个适用于vue的pdf预览组件库

cdd-pdf-view

文档传送门

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

props:
file:File file 对象
url:string

url 可以是

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

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

开始安装 setup

npm install cdd-pdf-view
````

## 用法 useage 全局注册组件

eg：

import Vue from 'vue'
import pdfView from 'cdd-pdf-view'

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

## 自定义组件引入名称

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

## 非全局注册

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

## 浏览器使用

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

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

名字:'cdd-pdf-view'

使用方法详细

可以去了解些js module的定义和用法。
这个vue插件对外导出两个元素

1.cddPdfView 组件

2. CddPdf(旧的叫作PdfView)

两个使用场景

一、傻瓜式使用场景，就是用组件，直接注册，然后使用全局组件，给该组件传入pdf下载的连接即可.
该组件两个prop（属性）

1. file，pdf文件，可用于浏览本地的pdf文件，使用input标签获取本地文件。也以用于从服务器获取pdf文件，然后预览。
2. url，本组件集成从网上下载功能，直接传递下载链接即可下载并预览。

注：url属性必须是没有加权限的下载链接，如果有权限要求，建议自行下载组成file，然后传递给file属性。
缺点：样式自调比较麻烦。

二、使用CddPdf类
该类有个getPdf静态方法，入参可看npm，该函数返回promise对象，得等到该promise对象执行完毕，便可获取完整解析完的图片，然后可以使用该图片在页面显示。

我司最近使用pdf实例

import {CddPdf} from 'cdd-pdf-view'
async initPdf () {
      if (!this.$user.isLogin) return
      const pdfUrls = new Map([
        [1, await import('@/assets/files/test1.pdf')],
        [2, await import('@/assets/files/test2.pdf')],
        [3, await import('@/assets/files/test3.pdf')],
        [4, await import('@/assets/files/test4.pdf')]
      ])
      this.loading = true
      CddPdf.GetPdf({url: pdfUrls.get(+this.infoIndex)}).then((res) => {
        this.pdfImags = res.imgs.slice(0)
      }).finally(() => {
        this.loading = false
      })
    }