离线网站制作,蜗牛影院看电影,万网没备案怎么做网站,wordpress支持的邮箱vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页#xff0c;同时解决预览pdf显示模糊的问题
插件介绍
pdfdist-mergeofd插件的作用可查看这篇文章#xff0c;同时使用ofdjs和pdfjs遇到的问题#xff0c;和解决方法——懒加载 该插件主要是为了解决pdfjs和ofdjs同时…vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页同时解决预览pdf显示模糊的问题
插件介绍
pdfdist-mergeofd插件的作用可查看这篇文章同时使用ofdjs和pdfjs遇到的问题和解决方法——懒加载 该插件主要是为了解决pdfjs和ofdjs同时使用时产生的兼容性问题用法与pdfjs一致
实现预览pdf
!-- 使用el-upload获取上传的文件 --el-uploadrefuploadaction:acceptfileType:on-changeonChangeFile:before-uploadbeforeFileUpload:show-file-listfalse:auto-uploadfalseel-button slottrigger typeprimary选择文件/el-button/el-upload!-- 控制翻页 --div v-ifpageCount styletext-align: centerel-button :disabledcurrentPage 1 clickclickPre上一页/el-buttonspan第{{ currentPage }} / {{ pageCount }}页/spanel-button :disabledcurrentPage pageCount clickclickNext下一页/el-button/div
!-- html部分非常简单创建一个canvas用于后续渲染即可 --
divrefcanvasContclasscanvas-containercanvas refmyCanvas classpdf-container/canvas
/div//这里是用的pdfdist-mergeofd如果使用pdfjs用法一致
import * as pdfJS from pdfdist-mergeofdpdfJS.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 rawif (raw.type application/pdf) {const reader new FileReader()this.currentType pdfreader.onload async e {this.pdfSrc e.target.resultlet 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-dist2.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)}}},// 根据页码渲染相应的PDFrenderPage(num) {this.renderingPage truethis.pdfData.promise.then(pdf {this.pageCount pdf.numPagespdf.getPage(num).then(page {// 获取DOM中为预览PDF准备好的canvasDOM对象let canvas this.$refs.myCanvaslet ctx canvas.getContext(2d)// 获取页面比率let ratio window.devicePixelRatio || 1console.log(ratio)// 根据页面宽度和视口宽度的比率就是内容区的放大比率let dialogWidth this.$refs[canvasCont].offsetWidthlet pageWidth page.view[2] * ratiolet scale dialogWidth / pageWidthlet viewport page.getViewport({ scale: scale * 2 })canvas.width viewport.width * ratiocanvas.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 falsethis.currentPage num})})})},// 计算角度_getRatio(ctx) {let dpr window.devicePixelRatio || 1let bsr ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio ||1return dpr / bsr},beforeFileUpload(file) {const fileName file.nameconst fileType this.fileType.split(,)if (fileType.every(item !fileName.endsWith(item))) {this.$tip.warning(请选择格式为${fileType.join(或)}类型的文件)return false}const { sizeLimit, sizeLimitWithUnit } thisif (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的质量 这是修改之后的质量变清晰了许多
