Vue网页中使用PDF.js弹窗显示pdf文档所有内容

本文中使用的PDF.js组件版本为3.11.174(最新版使用上会有所不同),引入文件如下:

首先页面定义一个隐藏的弹窗块(此处用ElementUI的Dialog组件)

<el-dialog ref="dialogPDF" :title="pdffile.name" center :visible.sync="isPDFVisible" width="80%"  :close-on-click-modal="true"  :show-close="true"><div>@*<canvas id="pdf-canvas"></canvas>*@<!--由于是要展示所有面面,所以所有页面都分别绑定一个canvas--><canvas ref="pdf-canvas" v-for="num in pdfPages"></canvas></div>
</el-dialog>

绑定的Vue Data:

data: function() {return {pdffile: {},isPDFVisible: false,pdfPages: 0,..........}
}

要展示的文件这里集成在一个上传组件中,如代码所示:

<el-form-item label="附件" prop="FileIDsArray"><div style="max-height:512px;overflow-x:auto;"><el-upload ref="upload_attach" :file-list="editForm.FileInfos" drag list-type="picture-card" multiple :limit="maxUpload" :on-exceed="handleExceed":action="uploadUrl" :auto-upload="autoupload" @*:headers="headers"*@ :data="uploadParam" :on-change="handleChange1" :before-upload="beforeUpload":on-success="uploadSuccess1" @*:on-preview="previewPic"*@ :on-remove="removeAttachFile1" :before-remove="beforeRemove" :class="{hideUnload:notAttachUploader}">@*<em class="el-icon-plus"></em>*@<em class="el-icon-upload"></em><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><div slot="file" slot-scope="{file}">@*<img class="el-upload-list__item-thumbnail":src="file.url" alt="">*@<span>{{file.name}}</span><span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview" style="font-size: inherit;" v-show="!!file && file.name.slice(-4).toLowerCase()=='.pdf'"@@click="handleViewFile(file)"><i class="el-icon-zoom-in"></i></span><span class="el-upload-list__item-delete"@@click="handleDownload(file)"><i class="el-icon-download"></i></span><span class="el-upload-list__item-delete"@@click="$refs.upload_attach.$refs['upload-inner'].onRemove(file);"><i class="el-icon-delete"></i></span></span></div></el-upload></div>
</el-form-item>

重点是在显示PDF文件内容的方法——handleViewFile(file):

handleViewFile: function (file) {var pThis = this;this.pdffile = file;this.isPDFVisible = true;this.$nextTick(function () {//const canvas = document.getElementById('pdf-canvas');pdfjsLib.getDocument(file.url).promise.then(function (pdfDoc) {pThis.pdfPages = pdfDoc.numPages;//由于canvas.getContext('2d')必须是在生成DOM并显示的情况下操作,由此需先"isPDFVisible=true"显示出组件,并在$nextTick完成DOM加载后再处理pdf内容的渲染:pThis.$nextTick(function () {for (var i = 1; i <= pThis.pdfPages; i++) {const canvas = pThis.$refs["pdf-canvas"][i - 1];pdfDoc.getPage(i).then(function (page) {const viewport = page.getViewport({ scale: 1 });const context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;page.render({canvasContext: context,viewport: viewport});});}});});});
},

参考文章:

PDF.js 示例简介:

https://blog.csdn.net/github_36738403/article/details/131325145

如何显示整体PDF(不仅仅是一页)PDF.JS: 

https://www.codenong.com/cs108161952/

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

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

相关文章

同创永益联合红帽打造一站式数字韧性解决方案

随着AI技术的快速兴起&#xff0c;IT技术已成为推动业务持续增长的重要驱动力&#xff0c;这要求企业不断尝试新事物&#xff0c;改变固有流程&#xff0c;加强IT技术与业务的合作&#xff0c;同时提升数字韧性能力&#xff0c;以实现业务目标。10月26日&#xff0c;红帽2023中…

“释放视频潜力,批量放大视频尺寸,高效提升视频质量“

在视频制作和编辑的过程中&#xff0c;我们经常需要调整视频的尺寸。然而&#xff0c;一个一个地手动调整不仅耗时&#xff0c;还容易出错。为了解决这个问题&#xff0c;现在有一款全新的视频批量剪辑工具&#xff0c;可以帮助你批量将视频尺寸放大&#xff0c;提升工作效率。…

FISCOBCOS入门(十)Truffle测试helloworld智能合约

本文带你从零开始搭建truffle以及编写迁移脚本和测试文件,并对测试文件的代码进行解释,让你更深入的理解truffle测试智能合约的原理,制作不易,望一键三连 在windos终端内安装truffle npm install -g truffle 安装truffle时可能出现网络报错,多试几次即可 truffle --vers…

2023.11.17 hadoop之HDFS进阶

目录 HDFS的机制 元数据简介 元数据存储流程:namenode 生成了多个edits文件和一个fsimage文件 edits和fsimage文件 SecondaryNameNode辅助NameNode的方式: HDFS的存储原理 写入数据原理: 发送写入请求,获取主节点同意,开始写入,写入完成 读取数据原理:发送读取请求,获取…

团结引擎已全面支持 OpenHarmony 操作系统

Unity 中国宣布与开放原子开源基金会达成平台级战略合作。 据称团结引擎已全面支持 OpenHarmony 操作系统&#xff0c;同时将为 OpenHarmony 生态快速带来更多高品质游戏与实时 3D 内容。Unity 称现在用户可以 “在 OpenHarmony 框架中感受到与安卓和 iOS 同样丝滑的游戏体验”…

系列十一、你平时工作用过的JVM常用基本配置参数有哪些?

一、常用参数 1.1、-Xms 功能&#xff1a;初始内存大小&#xff0c;默认为物理内存的1/64&#xff0c;等价于 -XX:InitialHeapSize 1.2、-Xmx 功能&#xff1a;最大分配内存&#xff0c;默认为物理内存的1/4&#xff0c;等价于 -XX:MaxHeapSize 1.3、-Xss 功能&#xff1a;设置…

CICD 持续集成与持续交付——git

git使用 [rootcicd1 ~]# yum install -y git[rootcicd1 ~]# mkdir demo[rootcicd1 ~]# cd demo/ 初始化版本库 [rootcicd1 demo]# git init 查看状态 [rootcicd1 demo]# git status[rootcicd1 demo]# git status -s #简化输出 [rootcicd1 demo]# echo test > README.md[roo…

开源vs闭源大模型如何塑造技术的未来?开源模型的优劣势未来发展方向

开源vs闭源大模型如何塑造技术的未来&#xff1f;开源模型的优劣势&未来发展方向 写在最前面一、开源与闭源&#xff1a;定义与历史背景开源和闭源的定义开源大模型&#xff1a;社区驱动的创新 二、开源和闭源的优劣势比较开源大模型&#xff08;瓶颈&#xff09;数据&…

QT下使用QChart绘制曲线

目录 头文件内容构造函数AddSeries方法UpdateSeries方法AppendSeriesData方法SetLegendVisiableSetRubberBandCPP内容测试函数 需要用到的头文件&#xff1a; #include <QtCharts/QChart> #include <QtCharts/QChartView> #include <QtCharts/QValueAxis> #…

淘宝详情api(获取主图)2023年11月20日最新版本

返回数据格式&#xff1a; 请求链接 {"item": {"apiStack": [{"name": "esi","value": "{\"delivery\": {\"from\": \"福建莆田\", \"to\": \"全国\", \"com…

酒糟废水处理设备有哪些

酒糟废水处理设备有以下几种&#xff1a; 格栅&#xff1a;用于拦截大颗粒悬浮物&#xff0c;以保护后续处理设备。调节池&#xff1a;用于调节水质和水量&#xff0c;使废水在处理过程中保持稳定。混凝反应池&#xff1a;通过添加混凝剂&#xff0c;使废水中的小颗粒悬浮物凝…

2023年中国吞咽神经和肌肉电刺激仪市场发展趋势分析:产品需求持续增长[图]

吞咽神经和肌肉电刺激仪是通过输出特定的低频脉冲电流对吞咽及构音功能相关的神经和肌肉进行电刺激&#xff0c;改善吞咽、构音肌群的收缩运动功能&#xff0c;缓解神经元麻痹&#xff0c;促进吞咽反射弧的重建与恢复&#xff0c;进而提高患者的吞咽及语言能力。 吞咽神经和肌…

如何定位el-tree中的树节点当父元素滚动时如何定位子元素

使用到的方法 Element 接口的 scrollIntoView() 方法会滚动元素的父容器&#xff0c;使被调用 scrollIntoView() 的元素对用户可见。 参数 alignToTop可选 一个布尔值&#xff1a; 如果为 true&#xff0c;元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoV…

axios升级依赖版本后报错SyntaxError: Cannot use import statement outside a module

Axios构建为ES模块&#xff0c;而不是在Node中运行时的CommonJs。Jest的问题是它在Node中运行代码。这就是为什么告诉Jest转换Axios有效的原因。 Axios SDK附带了一个用于Node env的内置CommonJs文件。因此&#xff0c;我们可以通过将以下内容添加到您的package.json来修复它&a…

一步一步教你如何在Windows 10上使用Java,包括下载、安装和配置等

Java开发工具包(JDK)是用于Java编程的软件,与Java虚拟机(JVM)和Java运行时环境(JRE)一起使用。JDK包括编译器和类库,允许开发人员创建可由JVM和JRE执行的Java程序。 在本教程中,你将学习在Windows上安装Java开发工具包。 检查是否安装了Java 在安装Java开发工具包之…

CentOS安装nodejs

查看可安装的版本 dnf module list nodejs选择需要版本安装 dnf module install nodejs:<stream>查看版本

2023年中国地产SaaS分类、产业链及市场规模分析[图]

SaaS是一种基于云计算技术&#xff0c;通过订阅的方式向互联网向客户提供访问权限以获取计算资源的一项软件即服务。地产SaaS则是SaaS的具体应用&#xff0c;提供了一个线上平台&#xff0c;用于协助房地产供应商与购房者、建筑承建商、材料供应商及房地产资产管理公司之间的协…

性能压力测试的优势与重要性

性能压力测试是软件开发过程中至关重要的一环&#xff0c;它通过模拟系统在极限条件下的运行&#xff0c;以评估系统在正常和异常负载下的表现。这种测试为确保软件系统的可靠性、稳定性和可伸缩性提供了关键信息。下面将探讨性能压力测试的优势以及为什么在软件开发中它具有不…

vue安装three.js并创建第一个入门场景

vue安装three.js&#xff0c;并创建第一个入门场景 安装three.js npm install --save three引入three.js import * as THREE from threethree.js结构 three.js坐标 创建一个场景 scene场景&#xff0c;camera相机&#xff0c;renderer渲染器 创建一个场景 this.scene new T…

定时关机软件哪个好?定时关机软件大盘点

在生活和工作中&#xff0c;我们可以使用定时关机软件来定时关闭电脑&#xff0c;以实现对电脑的控制。那么&#xff0c;定时关机软件哪个好呢&#xff1f;下面我们就来了解一下。 定时关机软件的作用 定时关机软件可以帮助用户在预设的时间自动关闭电脑。这对于那些需要在特…