vue2 pdfjs-2.8.335-dist pdf文件在线预览功能

1、首先先将 pdfjs-2.8.335-dist 文件夹从网上搜索下载,复制到public文件夹下.

2、在components下新建组件PdfViewer.vue文件

3、在el-upload 中调用 pdf-viewer 组件

4、在el-upload 中的 on-preview方法中加上对应的src路径

 internalPreview(file) {

//判断需要预览的地方加 props—pdfView
                if(this.pdfView){
                    let baseApi = process.env.VUE_APP_BASE_API;
                    let _path = file?.path;
                    this.src = `${baseApi}${_path}`
                }

}

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

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

相关文章

编译原理1.3习题 程序设计语言的发展历程

图源:文心一言 编译原理习题整理~🥝🥝 作为初学者的我,这些习题主要用于自我巩固。由于是自学,答案难免有误,非常欢迎各位小伙伴指正与讨论!👏💡 第1版:自…

IPv6隧道--GRE隧道

GRE隧道 通用路由封装协议GRE(Generic Routing Encapsulation)可以对某些网络层协议(如IPX、ATM、IPv6、AppleTalk等)的数据报文进行封装,使这些被封装的数据报文能够在另一个网络层协议(如IPv4)中传输。 GRE提供了将一种协议的报文封装在另一种协议报文中的机制,是一…

个人网站制作 Part 7 添加用户认证和数据库集成 | Web开发项目

文章目录 👩‍💻 基础Web开发练手项目系列:个人网站制作🚀 用户认证与数据库集成🔨添加用户认证🔧步骤 1: 使用Passport.js 🔨集成数据库🔧步骤 2: 使用MongoDB和Mongoose &#x1f…

Grafana(二)Grafana 两种数据源图表展示(json-api与数据库)

一. 背景介绍 在先前的博客文章中,我们搭建了Grafana ,它是一个开源的度量分析和可视化工具,可以通过将采集的数据分析、查询,然后进行可视化的展示,接下来我们重点介绍如何使用它来进行数据渲染图表展示 Docker安装G…

AIOps探索 | 基于大模型构建高效的运维知识及智能问答平台(2)

前面分享了平台对运维效率提升的重要性和挑战以及基于大模型的平台建设解决方案,新来的朋友点这里,一键回看精彩原文。 基于大模型构建高效的运维知识及智能问答平台(1)https://mp.csdn.net/mp_blog/creation/editor/135223109 …

【REMB 】翻译:草案remb-03

REMB REMB消息 以及 绝对时间戳选项 在带宽估计中的使用 :an absolute-value timestamp option for use in bandwidth estimatoin. 接收方带宽估计的RTCP消息 REMB 这位大神翻译的更好。 RTCP message for Receiver Estimated Maximum Bitrate draft-alvestrand-rmcat-remb-03…

iOS开发进阶(六):Xcode14 使用信号量造成线程优先级反转问题修复

文章目录 一、前言二、关于线程优先级反转三、优先级反转会造成什么后果四、怎么避免线程优先级反转五、使用信号量可能会造成线程优先级反转,且无法避免六、延伸阅读:iOS | Xcode中快速打开终端6.1 .sh绑定6.2 执行 pod install 脚本 七、延伸阅读&…

Android Activity的启动流程(Android-10)

前言 在Android开发中,我们经常会用到startActivity(Intent)方法,但是你知道startActivity(Intent)后Activity的启动流程吗?今天就专门讲一下最基础的startActivity(Intent)看一下Activity的启动流程,同时由于Launcher的启动后续…

STM32——DMA知识点及实战总结

1.DMA概念介绍 DMA,全称Direct Memory Access,即直接存储器访问。 DMA传输 将数据从一个地址空间复制到另一个地址空间。 注意:DMA传输无需CPU直接控制传输 2.DMA框图 3.DMA处理过程 外设的 8 个请求独立连接到每个通道,由 DMA_…

YOLOv5改进 | 融合改进篇 | 轻量化CCFM + SENetv2进行融合改进涨点 (全网独家首发)

一、本文介绍 本文给大家带来的改进机制是轻量化的Neck结构CCFM配合SENetv2改进的网络结构进行融合改进,其中CCFM为我本人根据RT-DETR模型一比一总结出来的,文中配其手撕结构图,其中SENetV2为网络结构重构化模块,通过其改进主干从而提取更有效的特征,这两个模块搭配在一起…

Java实现海南旅游景点推荐系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户端2.2 管理员端 三、系统展示四、核心代码4.1 随机景点推荐4.2 景点评价4.3 协同推荐算法4.4 网站登录4.5 查询景点美食 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的海南旅游推荐系统&#xff…

探索单元测试和 E2E 测试:提升软件质量的关键步骤(下)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

探索Redis特殊数据结构:Bitmaps(位图)在实际中的应用

一、概述 Redis官方提供了多种数据类型,除了常见的String、Hash、List、Set、zSet之外,还包括Stream、Geospatial、Bitmaps、Bitfields、Probabilistic(HyperLogLog、Bloom filter、Cuckoo filter、t-digest、Top-K、Count-min sketch、Confi…

【机组】算术逻辑运算单元实验的解密与实战

​🌈个人主页:Sarapines Programmer🔥 系列专栏:《机组 | 模块单元实验》⏰诗赋清音:云生高巅梦远游, 星光点缀碧海愁。 山川深邃情难晤, 剑气凌云志自修。 ​ 目录 🌺 一、 实验目的…

为您的网站添加网站底部美化代码 支持任意网站

将下面代码放在网站底部或者侧边栏,主要是cssjs的代码!html格式! 在逛 Gitee、Github 等各大代码仓库时,往往能看到以下这种徽章式的网页链接,美观好看又方便,那么这个徽章是如何制作出来的呢?…

区间预测 | Matlab实现BiLSTM-Adaboost-ABKDE的集成双向长短期记忆网络自适应带宽核密度估计多变量回归区间预测

区间预测 | Matlab实现BiLSTM-Adaboost-ABKDE的集成双向长短期记忆网络自适应带宽核密度估计多变量回归区间预测 目录 区间预测 | Matlab实现BiLSTM-Adaboost-ABKDE的集成双向长短期记忆网络自适应带宽核密度估计多变量回归区间预测效果一览基本介绍程序设计参考资料 效果一览 …

web架构师编辑器内容-编辑器组件图层面板功能开发01-锁定隐藏功能的开发

我们这一部分主要是对最右侧图层面板功能进行剖析,完成对应的功能的开发: 每个图层都对应编辑器上面的元素,有多少个元素就对应多少个图层,主要的功能如下: 锁定功能:点击锁定,在编辑器中没法编辑对应的组…

瑞_Java开发手册_(四)安全规约

🙊前言:本文章为瑞_系列专栏之《Java开发手册》的安全规约篇。由于博主是从阿里的《Java开发手册》学习到Java的编程规约,所以本系列专栏主要以这本书进行讲解和拓展,有需要的小伙伴可以点击链接下载。本文仅供大家交流、学习及研…

如何用Python调用智谱AI的API进行智能问答

一、引言 随着人工智能技术的不断演进,以ChatGPT为首的智能聊天机器人如:文心一言、通义千问、智谱AI等受到越来越多人的喜欢。这些智能引擎不仅有网页版,而且开放了免费的api接口,并给出了样例代码。 这样,我们可以…

Rust 错误处理(上)

目录 1、用 panic! 处理不可恢复的错误 对应 panic 时的栈展开或终止 1.1 使用 panic! 的 backtrace 2、用 Result 处理可恢复的错误 2.1 匹配不同的错误 2.2 失败时 panic 的简写:unwrap 和 expect 2.3 传播错误 错误是软件中不可否认的事实,所…