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

news2024/11/25 21:37:57

本文中使用的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.coloradmin.cn/o/1229538.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

手机数码类展示预约小程序效果如何

对于一家手机数码/电脑品牌来说&#xff0c;研发产品或衍生产品不少&#xff0c;通常会通过线上商城进行售卖。十年以来&#xff0c;流量成本逐渐增加&#xff0c;获客不易也难以寻找到合适的渠道&#xff0c;即使通过广告形式也因缺乏创意而耗时耗力&#xff0c;效果不佳。 同…

【shell】 1、bash语法超详细介绍

文章目录 修改前缀路径dirname set常用函数参数变量local 返回值正则打印第 n 行获取行号核对数据库各表数量jq查询检查日志 sshpassexpect数组xargs bash manual 修改前缀 参考 export PS1"bash> "路径 dirname strip last component from file name dir$(…

【带头学C++】----- 七、链表 ---- 7.5 学生管理系统(链表--上)

目录 1.main函数设计 2.定义Node节点类型 3.链表插入结点 在main函数中调用插入函数、打印函数 插入结点函数实现&#xff08;头插法&#xff09; 插入结点函数实现&#xff08;尾插法&#xff09; 遍历链表函数实现 4.演示插入、遍历结果 目录 1.main函数设计 2.定义…

阿里云oss使用签名url上传时的一些配置注意事项

我来讲一下测试下来遇到的问题点和解决方案&#xff1a; 一、配置相关问题 你可以先按照阿里云的文档把一些oss的基本配置弄好&#xff0c;再看下面的内容&#xff1b; 配置跨域访问规则&#xff1b; 这是非常重要的一步。默认情况下&#xff0c;oss不允许上传文件时携带Cont…

酒糟废水处理设备有哪些

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

spring boot加mybatis puls实现,在新增/修改时,对某些字段进行处理,使用的@TableField()

1.先说场景&#xff0c;在对mysql数据库表数据插入或者更新时都得记录时间和用户id 传统实现有点繁琐&#xff0c;这里还可以封装一下公共方法。 2.解决方法&#xff1a; 2.1&#xff1a;使用aop切面编程&#xff08;记录一下&#xff0c;有时间再攻克&#xff09;。 2.2&…

设计模式(二)-创建者模式(3)-抽象工厂模式

一、为什么需要抽象工厂模式&#xff1f; 在工厂模式中&#xff0c;我们需要定义多个继承于共同工厂抽象基类的工厂子类&#xff0c;这些子类负责创建一个对应的对象。工厂模式存在一个缺点就是&#xff1a;每次扩展新的工厂子类&#xff0c;就会增加系统的复杂度。 如果我们…

探索SPI:深入理解原理、源码与应用场景

文章目录 一、初步认识1、概念2、工作原理3、作用场景 二、源码分析1、ServiceLoader结构2、相关字段3、核心方法 三、案例connector连接器小案例1、新建SPI项目2、创建扩展实现项目1-MongoDB3、创建扩展实现项目2-Oracle4、测试 Spring应用1、创建study工程2、创建forlan-test…

如何远程控制别人电脑进行技术支持?

怎么提供远程技术支持&#xff1f; “我朋友的电脑出了一些问题&#xff0c;问我是否可以远程控制他的电脑帮他解决。请问有什么办法能快速的远程控制别人的电脑进行故障排除呢&#xff1f;” 当电脑出问题时&#xff0c;多数情况下会采用电话沟通进行解决&#…

Modbus转Profinet网关在金银精炼控制系统中应用案例

金银精炼控制系统中采用Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;连接1200plc与PID控制阀门进行通讯&#xff0c;通过控制PID阀门的大小来实现温度的恒温控制。这一系统的好处在于它能够提高金银精炼过程的效率和精确度。PID控制阀门可以根据温度的变化实时调整…

【Linux】vscode远程连接ubuntu,含失败解决方案

删除vscode远程连接 打开‪C:\Users\GIGA\.ssh\config文件&#xff0c;GIGA是windows下自己的用户名。 删除‪C:\Users\GIGA\.ssh\config文件里的所有内容&#xff0c;点击保存&#xff1b;然后刷新。 可以看出SSH 远程连接已经被删除了。 vscode远程连接ubuntu 在弹出的…

计算机毕业设计选题推荐-个人博客微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

DolphinDB 基于 Glibc 升级的性能优化实战案例

在高并发查询、查询需要涉及很多个分区的情况下&#xff0c;低版本的 glibc&#xff08;低于2.23&#xff09;会严重影响查询性能。需要升级 glibc 解决该问题优化性能。我们撰写了本文&#xff0c;通过 patchelf 工具修改可执行文件和动态库的 rpath&#xff0c;达到无需升级系…

SaleSmartly新增AI意图识别触发器!让客户享受更精准的自动化服务

AI意图识别技术是对话式AI中很重要的组成部分&#xff0c;通俗点来说就是一种可以识别用户在对话中表达的意图的技术。通过对大量数据的分析和学习&#xff0c;AI可以理解用户想要获得的信息&#xff0c;并根据这些信息来采取相应的行动或提供相应的响应。而在对话式AI中&#…

GPT-4充当“规划师、审计师”,颠覆性双层文生图表模型

DALL-E 3、Midjourney、Stable Diffusion等模型展现出了强大的创造能力&#xff0c;通过文本便能生成素描、朋克、3D、二次元等多种类型的高质量图片&#xff0c;但在生成科学图表&#xff08;柱状、直方、箱线、树状等&#xff09;方面却略显不足。 这是因为模型在生成图表时…

你学了Python之后让你成为行业卷王,升职加薪更有优势

都说Python能够实现自动化&#xff0c;那么Python具体能应用在哪些地方?哪些岗位学了Python更有优势?今天我们来看看一些大神将Python应用的出神入化的成果。 在这之前&#xff0c;先跟为大家分享个真实的故事。我朋友小宇前段时间为了一个品牌设计的大项目&#xff0c;想方案…

SSL证书对网站SEO的好处

随着网络安全意识的提高&#xff0c;越来越多的网站开始采用SSL证书来保护自己的数据传输过程。那么&#xff0c;SSL证书真的能为网站SEO带来好处吗&#xff1f;下面将为您分析这个问题。 加强用户体验和信任度 SSL证书不仅能确保数据传输的安全性&#xff0c;还能让客户感受…

【技术指南资料】编码器与正交译码器

我想提出一个关于PicoScope7新的译码器功能讨论。它已经推出一段时间&#xff0c;但你可能不知道这在汽车领域是扮演相当重要的角色。 正交译码器被用在转子位置传感器来转换关于旋转轴角度及方向的信息。 举例来说&#xff0c;它在电机上采用一对二进制的信号型式。 这种传感器…

Linux 时区设置

对于服务器来说&#xff0c;linux的时区影响着运行之上的数据库和后端程序的时区 应该和数据库和后端及其他程序的时区保持一致 其他相关时区的设置 pgsql时区设置&#xff1a; php时区设置&#xff1a; 1.显示当前的时间和时区 date结果类似下面&#xff0c;图中显示的是ut…

【揭秘】MySQL逻辑架构:一文带你全面了解!

mysql是我们开发过程中使用的最多的数据库&#xff0c;大多数程序员平时都是做CRUD&#xff0c;如果CRUD慢了&#xff0c;那就再加一个索引&#xff0c;如果加上索引还不行&#xff0c;那基本上开发就没辙了&#xff0c;因为对mysql内部理解不深入、不清晰&#xff0c;所以问题…