vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时解决预览pdf显示模糊的问题
插件介绍
pdfdist-mergeofd插件的作用可查看这篇文章，同时使用ofdjs和pdfjs遇到的问题，和解决方法——懒加载
该插件主要是为了解决pdfjs和ofdjs同时使用时产生的兼容性问题，用法与pdfjs一致
实现预览pdf
<!-- 使用el-upload获取上传的文件 -->
<el-upload
ref="upload"
action
:accept="fileType"
:on-change="onChangeFile"
:before-upload="beforeFileUpload"
:show-file-list="false"
:auto-upload="false"
>
<el-button slot="trigger" type="primary">选择文件</el-button>
</el-upload>
<!-- 控制翻页 -->
<div v-if="pageCount" style="text-align: center">
<el-button :disabled="currentPage == 1" @click="clickPre">
上一页
</el-button>
<span>第{{ currentPage }} / {{ pageCount }}页</span>
<el-button :disabled="currentPage == pageCount" @click="clickNext">
下一页
</el-button>
</div>
<!-- html部分非常简单，创建一个canvas用于后续渲染即可 -->
<div
ref="canvasCont"
class="canvas-container"
>
<canvas ref="myCanvas" class="pdf-container"></canvas>
</div>
//这里是用的pdfdist-mergeofd，如果使用pdfjs，用法一致
import * as pdfJS from 'pdfdist-mergeofd'
pdfJS.GlobalWorkerOptions.workerSrc = require('pdfdist-mergeofd/build/pdf.worker.entry')
export default {
name: 'xxx',
data() {
return {
file: null,
//页面宽度，根据实际调整
pageWidth: 800,
//页面高度，根据实际调整
pageHeight: 1131,
//当前页数
currentPage: 0,
//总页数
pageCount: 0,
pdfSrc: null,
//尺寸限制
sizeLimit: 1 * 1024 * 1024,
//是否正在渲染页面，防止过快翻页
renderingPage: false,
}
},
methods: {
// 上传文件
async onChangeFile({ raw }) {
if (!this.beforeFileUpload(raw)) {
return
}
if (!raw) {
return
}
this.file = raw
if (raw.type === 'application/pdf') {
const reader = new FileReader()
this.currentType = 'pdf'
reader.onload = async e => {
this.pdfSrc = e.target.result
let data = atob(
reader.result.substring(reader.result.indexOf(',') + 1)
)
this.loadPdfData(data)
}
reader.readAsDataURL(raw)
}
},
loadPdfData(data) {
// 引入pdf.js的字体
let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
//读取base64的pdf流文件
this.pdfData = pdfJS.getDocument({
data: data,
cMapUrl: CMAP_URL,
cMapPacked: true
})
this.renderPage(1)
},
// 上一页
clickPre() {
if (!this.renderingPage && this.currentPage && this.currentPage > 1) {
this.renderPage(this.currentPage - 1)
}
}
},
//下一页
clickNext() {
if (
!this.renderingPage &&
this.currentPage &&
this.currentPage < this.pageCount
) {
this.renderPage(this.currentPage + 1)
}
}
},
// 根据页码渲染相应的PDF
renderPage(num) {
this.renderingPage = true
this.pdfData.promise.then(pdf => {
this.pageCount = pdf.numPages
pdf.getPage(num).then(page => {
// 获取DOM中为预览PDF准备好的canvasDOM对象
let canvas = this.$refs.myCanvas
let ctx = canvas.getContext('2d')
// 获取页面比率
let ratio = window.devicePixelRatio || 1
console.log(ratio)
// 根据页面宽度和视口宽度的比率就是内容区的放大比率
let dialogWidth = this.$refs['canvasCont'].offsetWidth
let pageWidth = page.view[2] * ratio
let scale = dialogWidth / pageWidth
let viewport = page.getViewport({ scale: scale * 2 })
canvas.width = viewport.width * ratio
canvas.height = viewport.height * ratio
// 缩放比率
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
let renderContext = {
transform: [1, 0, 0, 1, 0, 0],
canvasContext: ctx,
viewport: viewport
}
page.render(renderContext).promise.then(() => {
this.renderingPage = false
this.currentPage = num
})
})
})
},
// 计算角度
_getRatio(ctx) {
let dpr = window.devicePixelRatio || 1
let bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1
return dpr / bsr
},
beforeFileUpload(file) {
const fileName = file.name
const fileType = this.fileType.split(',')
if (fileType.every(item => !fileName.endsWith(item))) {
this.$tip.warning(`请选择格式为${fileType.join('或')}类型的文件`)
return false
}
const { sizeLimit, sizeLimitWithUnit } = this
if (file.size > sizeLimit) {
this.$tip.warning(`文件大小不能超过${sizeLimitWithUnit}，请重新选择`)
return false
}
return true
},
}
}
解决pdf显示模糊
很多文章介绍说调整显示区域大小，这样确实可以提高清晰度，当时当显示区域有限时就无法解决，因此解决方案采用将渲染canvas区域的scale翻倍，同时通过css的transform属性将区域大小设置成原来的一半。
这种方法的原理是增加渲染区域的物理像素数，从而提高图像的分辨率。
参考文章提高PDF预览的清晰度
.pdf-container {
transform: scale(0.5);
transform-origin: top left;
}
效果展示
这是修改之前显示pdf的质量
这是修改之后的质量，变清晰了许多
