cdd-pdf-view

cdd-pdf-view

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

开始安装 setup

npm install cdd-pdf-view

组成

• cddPdfView

  预览 pdf 的 ui 组件。

• CddPdf

  解析 pdf 的类

cddPdfView

props

• file:File file 对象

• url:string

url 可以是

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

CddPdf/PdfView

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

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

属性

• file:File 文件，创建时传入的。

• url:string 地址，流的完整地址。

• imgs:string[] 使用cddPdf.getPdf(params)解析完后，可用于预览的图片地址。

• isBlobUrl:Boolean 预览地址是否为 blob 连接。

• promise: Promise 等待解析时的 promose 属性

• options 配置项

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

方法

静态方法GetPdf

GetPdf(params):Promise

直接生成一个 CddPdf 对象。

参数：params:Object

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

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

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

用法 useage 全局注册组件

eg：

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

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

自定义组件引入名称

/* 
如果想要自定义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 文件中使用该组件，则直接引入当作平常组件使用即可。

浏览器使用

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

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

名字:'cdd-pdf-view'

类 PdfView 的使用

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

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

单独胡引入

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

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

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

PdfView 实例：

如下所示

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

示例：

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