vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页,同时解决预览pdf显示模糊的问题

vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页,同时解决预览pdf显示模糊的问题

插件介绍

pdfdist-mergeofd插件的作用可查看这篇文章,同时使用ofdjs和pdfjs遇到的问题,和解决方法——懒加载

该插件主要是为了解决pdfjs和ofdjs同时使用时产生的兼容性问题,用法与pdfjs一致

实现预览pdf

<!-- 使用el-upload获取上传的文件 --><el-uploadref="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用于后续渲染即可 -->
<divref="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 = rawif (raw.type === 'application/pdf') {const reader = new FileReader()this.currentType = 'pdf'reader.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-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)}}},// 根据页码渲染相应的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的质量
在这里插入图片描述
这是修改之后的质量,变清晰了许多
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/459339.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PUCCH——Format和资源集】

PUCCH 信道格式&#xff0c;就是指对于PUCCH信道&#xff0c;在时域上占据多少个OFDM符号&#xff0c;频域上占据多少个RB&#xff0c;传输比特数多少的一种约定。 NR中&#xff0c;在38.213-9.2.2节对PUCCH 格式进行了定义&#xff0c;目前&#xff0c;一共有5种格式&#xf…

【CUDA代码实践03】m维网格n维线程块对二维矩阵的索引

文章目录 一、数据存储方式二、二维网格二维线程块三、二维网格一维线程块四、一维网格一维线程块 为了方便下次找到文章&#xff0c;也方便联系我给大家提供帮助&#xff0c;欢迎大家点赞&#x1f44d;、收藏&#x1f4c2;和关注&#x1f514;&#xff01;一起讨论技术问题&am…

软件测试工程师晋升方向,你选对了吗?

在信息技术行业中&#xff0c;软件测试工程师是一个至关重要的角色&#xff0c;他们负责确保软件的质量和稳定性。然而&#xff0c;随着经验和技能的增长&#xff0c;软件测试工程师也面临着晋升和职业发展的问题。本文将探讨软件测试工程师的晋升方向&#xff0c;为有志于在软…

关键词排名技巧实用指南提升网站流量的有效策略

内容概要 在数字营销的世界中&#xff0c;关键词排名的影响不可小觑。关键词是用户在搜索引擎中输入的词语&#xff0c;通过精确选择和优化这些关键词&#xff0c;网站能够更轻松地被目标用户发现。提升关键词排名的第一步是了解基本概念&#xff0c;包括关键词的分类、重要性…

NVR设备ONVIF接入平台EasyCVR视频分析设备平台视频质量诊断技术与能力

视频诊断技术是一种智能化的视频故障分析与预警系统&#xff0c;NVR设备ONVIF接入平台EasyCVR通过对前端设备传回的码流进行解码以及图像质量评估&#xff0c;对视频图像中存在的质量问题进行智能分析、判断和预警。这项技术在安防监控领域尤为重要&#xff0c;因为它能够确保监…

前端八股文第一篇

自我介绍&#xff1a;我的优势以及和这个岗位的匹配度。 为什么想进我们公司&#xff1a;HR想听有没有对这个岗位进行充分了解。 以前做的项目&#xff1a;你的思路&#xff0c;你的贡献&#xff0c;你的总结是什么。 介绍最失败的事情&#xff1a;有没有总结和反思。 要求…

SolidWorks 导出 URDF 中的惯性矩阵错误问题

系列文章目录 前言 一、 dsubhasish09于2021年5月23日发表评论 在装配体中定义由多个零件组成的 link 时&#xff0c;单个零件质心处各自的惯性值&#xff08;在使用相似性变换使其与关节坐标系平行后&#xff09;会直接相加&#xff0c;从而得到净惯性矩阵&#xff0c;而不是…

鸿蒙UI开发——基于组件安全区方案实现沉浸式界面

1、概 述 本文是接着上篇文章 鸿蒙UI开发——基于全屏方案实现沉浸式界面 的继续讨论。除了全屏方案实现沉浸式界面外&#xff0c;我们还可以使用组件安全区的方案。 当我们没有使用setWindowLayoutFullScreen()接口设置窗口为全屏布局时&#xff0c;默认使用的策略就是组件安…

鸿蒙学习总结

鸿蒙&#xff08;HarmonyOS&#xff09;&#xff0c;做为国产自主研发设计的第一个操作系统&#xff0c;从开放测试以来一直备受关注。其纯血鸿蒙版&#xff08;HarmonyOS NEXT&#xff09;也于进日发布。过去的一段时间里&#xff0c;我站在一个移动开发者的角度对HarmonyOS进…

【electron8】electron实现“图片”的另存为

注&#xff1a;该列出的代码&#xff0c;都在文章内示例出 1. 另存为按钮事件&#xff1a; const saveAsHandler async () > {const { path, sessionId } recordInfoif(typeof message ! string) return;// 因为我的图片是加密的&#xff0c;所以我需要根据接口返回的路…

着色器的认识

知识了解&#xff1a; 着色器&#xff1a; 顶点着色器: 用来描述顶点的特性,如位置、颜色等&#xff0c;其中&#xff0c;顶点&#xff1a;是指二维或三维空间中的一个点比如交点或者端点。 片元着色器&#xff1a;用来进行逐片元处理操作&#xff0c;比如光照、颜色叠加等&…

如何将原本打开Edge呈现出的360浏览器,更换成原本的Edge页面或者百度等其他页面

每次打开Edge浏览器&#xff0c;都会呈现出360浏览器的页面&#xff0c;很烦。以下将说明如果将呈现出的360浏览器&#xff0c;更换成原本的Edge页面或者百度等其他页面。 1.找到你的控制面板&#xff0c;点击卸载程序。 2. 找到360安全卫士&#xff0c;右键单击更改/卸载。 3…

Android 应用申请 Google MBA权限

Google Case链接&#xff1a;89 > 34810 > 30025 > 155353 > Handheld > MBA Policies 按照指引填写模板 This bug is for the approval of MBAs under [13.2.2 Pregrant permissions policy](https://docs.partner.android.com/gms/policies/domains/mba#mba-…

基于 ThinkPHP+Mysql 灵活用工_灵活用工系统_灵活用工平台

基于 ThinkPHPMysql 灵活用工灵活用工平台灵活用工系统灵活用工小程序灵活用工源码灵活用工系统源码 开发语言 ThinkPHPMysql 源码合作 提供完整源代码 软件界面展示 一、企业管理后台 二、运用管理平台 三、手机端

Web 核心指标优化之 INP 篇

这篇文章是我在公司做 INP 优化经验分享的演讲稿。 大家好&#xff0c;今天我要做的分享是关于 INP 的一些优化经验。 概念 首先&#xff0c;什么叫 INP 呢。 INP 的全称叫 Interaction to Next Pain &#xff0c;翻译过来就是从交互到下一次绘制的延迟。这是 Google 提出来的…

Footprint Analytics 现已支持 TRON 链上数据分析

我们很高兴地宣布&#xff0c;全球最大的区块链网络之一 TRON&#xff08;波场&#xff09;已经成功接入 Footprint Analytics&#xff01;通过这次集成&#xff0c;开发者、分析师和区块链爱好者们现在可以使用 Footprint 的专业分析工具&#xff0c;深入挖掘 TRON 生态系统的…

考到了PMP证书之后,我的电话被打爆了....

考到了PMP之后&#xff0c;万年不见响的手机竟也开始频繁来call了~&#x1f645; 一般是哪些人&#xff0c;会因为什么事来找&#xff1f;本期小赛就给大家讲讲是啥情况~ 一、HR打电话邀请面试 在没有PMP证书的时候&#xff0c;自己投出去的简历往往是石沉大海&#xff0c;杳…

UI设计软件全景:13款工具助力创意实现

选择恰当的UI设计工具对于创建美观且用户体验良好的应用程序界面至关重要。不同的APP功能可能需要不同的界面设计软件&#xff0c;但并非所有工具都需要精通&#xff0c;熟练掌握几个常用的就足够了。以下是13款APP界面设计软件&#xff0c;它们能够为你的团队提供绘制APP界面所…

使用iframe内嵌grafana监控页面

grafana监控大盘被普遍采用&#xff0c;但一个缺点就是一次只能打开一个页面&#xff0c;切换页面很不便&#xff0c;如果能一次同时展示多个页面就好了&#xff0c;如图&#xff1a; 使用tab标签&#xff0c;结合iframe&#xff0c;把各个监控页面全放在一起&#xff0c;可以…

人脸美颜 API 对接说明

本文将介绍一种 人脸美颜 API 对接说明&#xff0c;它可以通过用户上传一张人脸图片&#xff08;最多能处理一张图片中最大的五张人脸信息&#xff09;&#xff0c;精准定位五官&#xff0c;实现美肤、亮肤、祛痘等美颜功能。 接下来介绍下 人脸美颜 API 的对接说明。 申请流…