# pdfjs
- 使用不同的版本引入的pdf-dist方式会是不一样的。[例子是^2.2.228]
<!--查看pdf票据-->
<template>
<div class="main-container">
<input type="file" ref="fielinput" @change="uploadFile" />
<h1>PDF翻页显示示例</h1>
<div class="canvas-container">
<canvas ref="myCanvas" class="pdf-container">
</canvas>
</div>
<div class="pagination-wrapper">
<button @click="clickPre">上一页</button>
<span>第{{pageNo}} / {{pdfPageNumber}}页</span>
<button @click="clickNext">下一页</button>
</div>
<h1>PDF多页连续滚动显示示例</h1>
<div class="scroll-pdf-contanier" id="scrollPdfBox">
<div v-for="index in pdfTotalPages" :key="index">
<canvas :ref="`scrollPdfCanvas${index}`" class="scroll-pdf-container"></canvas>
</div>
</div>
</div>
</template>
<script>
import * as pdfJS from 'pdfjs-dist'
export default {
mounted() {
this.$nextTick(()=>{
console.log('ceshi1',pdfJS,'pdfJS')
})
},
data() {
return {
pageNo: null,
pdfPageNumber: null,
pdfTotalPages: 1,
renderingPage: false,
pdfData: null, // PDF的base64
scale: 1 // 缩放值
}
},
methods: {
uploadFile () {
let inputDom = this.$refs.fielinput
let file = inputDom.files[0]
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
let data = atob(reader.result.substring(reader.result.indexOf(',') + 1))
this.loadPdfData(data)
}
},
loadPdfData (data) {
// 引入pdf.js的字体
let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
//读取base64的pdf流文件
this.pdfData = pdfJS.getDocument({
data:data,// PDF base64编码
//url: 'https://mkdoorway.oss-cn-hangzhou.aliyuncs.com/%E9%98%BF%E9%87%8C%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83.pdf', //如果加载url可以使用
cMapUrl: CMAP_URL,
cMapPacked: true
})
this.renderPage(1)
this.renderScrollPdf()
},
// 根据页码渲染相应的PDF
renderPage (num) {
this.renderingPage = true
this.pdfData.promise.then((pdf) => {
this.pdfPageNumber = pdf.numPages
pdf.getPage(num)
.then((page) => {
// 获取DOM中为预览PDF准备好的canvasDOM对象
let canvas = this.$refs.myCanvas
let viewport = page.getViewport(this.scale)
canvas.height = viewport.height
canvas.width = viewport.width
let ctx = canvas.getContext('2d')
let renderContext = {
canvasContext: ctx,
viewport: viewport
}
page.render(renderContext).then(() => {
this.renderingPage = false
this.pageNo = num
})
})
})
},
clickPre () {
if (!this.renderingPage && this.pageNo && this.pageNo > 1) {
this.renderPage(this.pageNo - 1)
}
},
clickNext () {
if (!this.renderingPage && this.pdfPageNumber && this.pageNo && this.pageNo < this.pdfPageNumber) {
this.renderPage(this.pageNo + 1)
}
},
renderScrollPdf () {
this.pdfData.promise.then((pdf) => {
this.pdfTotalPages = pdf.numPages
this.renderScrollPdfPage(1)
})
},
// 渲染连续滚动PDF
renderScrollPdfPage (num) {
this.pdfData.promise.then((pdf) => {
let numPages = pdf.numPages
pdf.getPage(num)
.then((page) => {
let canvas = this.$refs[`scrollPdfCanvas${num}`][0]
let viewport = page.getViewport(this.scale)
canvas.height = viewport.height * this.scale
canvas.width = viewport.width * this.scale
let ctx = canvas.getContext('2d')
let renderContext = {
canvasContext: ctx,
viewport: viewport
}
page.render(renderContext).then(() => {
if (num < numPages) {
this.renderScrollPdfPage(num + 1)
}
})
})
})
}
}
}
</script>
<style scoped>
.main-container {
display: flex;
flex-direction: column;
align-items: center;
}
.canvas-container {
width: 400px;
height: 500px;
border: 1px dashed black;
position: relative;
display: flex;
justify-content: center;
}
.scroll-pdf-contanier {
width: 400px;
height: 500px;
border: 1px dashed black;
position: relative;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
.pdf-container {
width: 100%;
height: 100%;
}
.scroll-pdf-container {
width: 350px;
}
.pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
</style>
可以引用编译好的包
//如果直接引用可能会报错，那么可能就是版本问题
import * as pdfJS from 'pdfjs-dist'
2.8.335版本之前
import PDFJS from 'pdfjs-dist/es5/build/pdf.js'
2.8.335版本之后
import PDFJS from 'pdfjs-dist/legacy/build/pdf.js'
虽然用iframe可以直接访问pdf，但是用了pdfjs后，会报跨域问题，需要在oss上进行配置
pdfjs.GlobalWorkerOptions.workerSrc，是一个核心库，单独创建工作者线程去处理复杂的业务，如果不使用可能会存在卡顿的问题。
//这是本地加载
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; //最新版本找不到这个文件了
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
//cdn远程加载
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
本地加载的话新版本是加载build下的worker.min.main.js,可以把这个文件拷贝到public目录下，结合window.origin拼接使用
# pdfjs api
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | PDF的url地址 | String/URL | - |
| data | 二进制 PDF 数据。使用类型化数组 (Uint8Array) 来提高内存使用率。如果 PDF 数据是 BASE64 编码的，请先使用 atob() 将其转换为二进制字符串 | TypedArray/Array/String | - |
| httpHeaders | 基本身份验证请求头 | Object | - |
| withCredentials | 指示是否应使用 cookie 或授权标头等凭据发出跨站点访问控制请求。 | Boolean | false |
| password | 用于解密受密码保护的 PDF | String | - |
| initialData | 带有第一部分或全部 pdf 数据的类型化数组。由扩展使用，因为在切换到范围请求之前已经加载了一些数据。 | TypedArray | - |
| length | PDF文件长度。它用于进度报告和范围请求操作 | Number | - |
| range | 允许使用自定义范围 | PDFDataRangeTransport | - |
......
# 利用pdfjs自带的viewer
去官网上下载pdfjs后将文件解压缩，重命名为pdf文件夹,放在vue的public目录下。
<iframe src="./pdf/web/viewer.html?file=http://mkdoorway.oss-cn-hangzhou.aliyuncs.com/%E9%98%BF%E9%87%8C%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83.pdf" frameborder="0"></iframe>
pdf目录下的web/viewer.js中，注释掉以下代码，否则页面会报错
// if (origin !== viewerOrigin && protocol !== "blob:") {
// throw new Error("file origin does not match viewer's");
// }
此方法dist打包后，页面没有任何响应！需要后续试验查看
# pdfjs 签章展示
修改pdf.worker.js中注释掉一下代码，pdf.worker.js.map也需要去处理
// if (data.fieldType === 'Sig') {
// data.fieldValue = null;
// _this3.setFlags(_util.AnnotationFlag.HIDDEN);
// }
签章设置在比较新的版本已经修复了，不需要这么操作了