当前位置: 首页 > news >正文

【vue3】实现pdf在线预览的几种方式

今天一天对当前可用的pdf预览插件做了测试,主要需求是只能预览不能下载,但对于前端来说,没有绝对的禁止,这里只罗列实现方式。
目前采用vue3版本为:3.2.37

  1. iframe
  2. vue-office
  3. pdfjs-dist

iframe

先说最简单的,iframe可以直接展示pdf文件,所以如果不作禁止预览等操作,iframe是最合适的。

    <el-dialogv-model="previewOtherUpload"reset-drag-positiondraggablesticky:title="_options.imgName || '详情'"footer-hideclass-name="vertical-center-modal"><div@contextmenu.preventstyle="user-select: none;"><iframeref="iframe":src="`${modelValue}#toolbar=0`"width="100%"height="600px"@load="onIframeLoad"></iframe></div></el-dialog><script setup>
const modelValue = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf')
let previewOtherUpload = ref(false);
const iframe = ref(null)const clickShow = () => {previewOtherUpload.value = true;
}// 尝试在iframe加载完毕后,进行右键禁用,但实际需要通过postmessage来处理,所以这里无实际用处
const onIframeLoad = () => {try {console.log('iframe 已加载', iframe.value.contentWindow.window);if (iframe.value.contentWindow.document) {iframe.value.contentWindow.document.addEventListener('contextmenu', (e) => e.preventDefault());}} catch (error) {console.error('无法访问 iframe 内容:', error);}
}
</script>

在这里插入图片描述

vue-office

vue-office-gitcode地址

安装
#docx文档预览组件
npm install @vue-office/docx vue-demi@0.14.6#excel文档预览组件
npm install @vue-office/excel vue-demi@0.14.6#pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.14.6#pptx文档预览组件
npm install @vue-office/pptx vue-demi@0.14.6如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api

我们如果只预览pdf,则安装 npm install @vue-office/pdf vue-demi@0.14.6

    <el-dialogv-model="previewOtherUpload"reset-drag-positiondraggablesticky:title="_options.imgName || '详情'"footer-hideclass-name="vertical-center-modal"><div@contextmenu.preventstyle="user-select: none;"><VueOfficePdf:src="modelValue"/></div></el-dialog><script setup>
import VueOfficePdf from '@vue-office/pdf'
const modelValue = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf')
let previewOtherUpload = ref(false);const clickShow = () => {previewOtherUpload.value = true;
}
</script>

在这里插入图片描述

pdfjs-dist

这是目前最麻烦的一个插件,一定先确定下载的版本"pdfjs-dist": “2.16.105”,我用的是这个,否则下面的workerSrc设置会有问题。

  <el-dialogv-model="previewOtherUpload"reset-drag-positiondraggablesticky:title="_options.imgName || '详情'"footer-hideclass-name="vertical-center-modal"><div id="pdf-view"@contextmenu.preventstyle="user-select: none;"><canvas v-for="page in state.pdfPages" :key="page" id="pdfCanvas" /><div id="text-view"></div></div></el-dialog><script setup>
import { computed, reactive, ref, watch, nextTick } from "vue";
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.js'
import 'pdfjs-dist/web/pdf_viewer.css'
import * as PDF from 'pdfjs-dist'
// 设置 pdf.worker.js 路径
PDF.GlobalWorkerOptions.workerSrc = '../../../node_modules/pdfjs-dist/build/pdf.worker.js';
let pdfDoc = null;const modelValue = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf')
let previewOtherUpload = ref(false);const clickShow = () => {loadFile(modelValue)previewOtherUpload.value = true;
}const loadFile = (url) => {PDF.getDocument({url,cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/',cMapPacked: true,}).promise.then((pdf) => {pdfDoc = pdf// 获取pdf文件总页数state.pdfPages = pdf.numPagesnextTick(() => {renderPage(1) // 从第一页开始渲染})})
}
const renderPage = (num) => {pdfDoc.getPage(num).then((page) => {const canvas = document.getElementById('pdfCanvas')const ctx = canvas.getContext('2d')const viewport = page.getViewport({ scale: state.pdfScale })canvas.width = viewport.widthcanvas.height = viewport.heightconst renderContext = {canvasContext: ctx,viewport}page.render(renderContext)})
}
</script>

插件样式也不好调整,不推荐。

总结:
最后还是使用了第二种方式,作为禁止下载的展示。

相关文章:

【vue3】实现pdf在线预览的几种方式

今天一天对当前可用的pdf预览插件做了测试&#xff0c;主要需求是只能预览不能下载&#xff0c;但对于前端来说&#xff0c;没有绝对的禁止&#xff0c;这里只罗列实现方式。 目前采用vue3版本为&#xff1a;3.2.37 iframevue-officepdfjs-dist iframe 先说最简单的&#xf…...

(学习总结22)Linux 基本指令1

Linux 基本指令1 基本指令当前目录信息指令 ls查看路径指令 pwd改变当前所在目录指令 cd创建或更改文件时间指令 touch创建目录指令 mkdir删除空目录指令 rmdir删除指令 rm查阅手册指令 man拷贝文件指令 cp移动文件指令 mv打印内容指令 echo 查看指令查找文件指令 find查看指令…...

Linux:用 clang 编译带 sched_ext 功能内核

文章目录 1. 前言2. 编译过程2.1 准备内核源代码2.2 安装编译工具2.3 配置、编译、运行2.3.1 配置2.3.2 编译2.3.3 运行 3. 参考资料 1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#xff0c;作者不做任何承诺。 2. 编译过程 …...

Redis 的集群 --- 数据分开扛

序言 上一章内容中我们介绍到了 哨兵 来保证我们主机在发生故障时能够及时地选出一个新的主机&#xff0c;但是哨兵地加入只是提供了 高可用性 和 故障转移&#xff0c;并没有真正的提升架构的性能。如果不断地加入新的数据的话&#xff0c;主机的压力会很大&#xff0c;一方面…...

微信小程序中缓存数据全方位解惑

微信小程序中缓存数据全方位解惑 微信小程序中的数据缓存是提升用户体验和优化性能的重要手段&#xff0c;跟电脑浏览器中的Local Storage的性质一样。以下是关于微信小程序数据缓存的相关知识点和示例的详细介绍&#xff1a; 1. 数据缓存的类型 微信小程序提供了两种数据缓…...

LeetCode 每日一题 2025/2/10-2025/2/16

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 2/10 913. 猫和老鼠2/11 1728. 猫和老鼠 II2/12 1760. 袋子里最少数目的球2/13 1742. 盒子中小球的最大数量2/14 1552. 两球之间的磁力2/15 1706. 球会落何处2/16 1299. 将…...

使用 Shiro 和 JPA 结合 MySQL 实现一个简易权限管理系统

1. 项目设置 首先&#xff0c;确保你的项目已经配置好 Maven 或 Gradle 依赖管理工具&#xff0c;并添加以下依赖&#xff1a; Maven 依赖 <dependencies><!-- Shiro 核心库 --><dependency><groupId>org.apache.shiro</groupId><artifactI…...

DeepSeek与医院电子病历的深度融合路径:本地化和上云差异化分析

一、引言 1.1 研究背景与意义 在医疗信息化快速发展的当下,电子病历系统已成为医院信息管理的核心构成。电子病历(EMR)系统,是指医务人员在医疗活动过程中,使用医疗机构信息系统生成的文字、符号、图标、图形、数据、影像等数字化信息,并能实现存储、管理、传输和重现的…...

设计模式:代理模式

代理模式是很常见的设计模式&#xff0c;即使没有专门学习过这种设计模式&#xff0c;在工作中也一定用过这种设计模式。在实际生活中&#xff0c;代理模式也是常见的&#xff0c;比如内阁首辅相对于皇帝&#xff0c;前者是后者的代理&#xff0c;内阁首辅收到奏折时&#xff0…...

141,【1】buuctf web [SUCTF 2019]EasyWeb

进入靶场 代码审计 <?php // 定义函数get_the_flag&#xff0c;功能是处理文件上传相关操作 function get_the_flag() {// 注释说明&#xff1a;webadmin会每隔20分钟删除用户上传的文件$userdir "upload/tmp_" . md5($_SERVER[REMOTE_ADDR]);// 检查用户目录…...

破解微服务疑难杂症:2025年全解决方案

微服务架构已经成为现代软件开发的主流选择&#xff0c;其优势在于能够将复杂的系统拆分为独立的服务模块&#xff0c;方便开发和维护。然而&#xff0c;在微服务的实施过程中&#xff0c;开发者往往会面临许多挑战&#xff0c;如服务间通信、数据一致性、性能优化和故障处理等…...

Node.js 中的 Event 模块详解

Node.js 中的 Event 模块是实现事件驱动编程的核心模块。它基于观察者模式&#xff0c;允许对象&#xff08;称为“事件发射器”&#xff09;发布事件&#xff0c;而其他对象&#xff08;称为“事件监听器”&#xff09;可以订阅并响应这些事件。这种模式非常适合处理异步操作和…...

EasyRTC嵌入式WebRTC视频通话SDK支持Web浏览器、Linux、ARM、Android、iOS

随着互联网技术的飞速发展&#xff0c;实时通信&#xff08;RTC&#xff09;已经成为现代应用中不可或缺的一部分。无论是视频会议、在线教育、远程医疗&#xff0c;还是社交娱乐&#xff0c;实时通信技术都在其中扮演着重要角色。 然而&#xff0c;WebRTC技术在PC和移动端的支…...

pycharm社区版有个window和arm64版本,到底下载哪一个?还有pycharm官网

首先pycharm官网是这一个。我是在2025年2月16日9:57进入的网站。如果网站还没有更新的话&#xff0c;那么就往下滑一下找到 community Edition,这个就是社区版了免费的。PyCharm&#xff1a;适用于数据科学和 Web 开发的 Python IDE 适用于数据科学和 Web 开发的 Python IDE&am…...

【玩转全栈】----Django模板语法、请求与响应

目录 一、引言 二、模板语法 三、传参 1、视图函数到模板文件 2、模板文件到视图函数 四、引入静态文件 五、请求与响应 ?1、请求 2、响应 六、综合小案例 1、源码展示 2、注意事项以及部分解释 3、展示 一、引言 像之前那个页面&#xff0c;太过简陋&#xff0c;而且一个完整…...

网络安全:挑战、技术与未来发展

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 在数字化时代&#xff0c;网络安全&#xff08;Cybersecurity&#xff09;已成为全球关注的焦点。随着云计算、大数据、…...

DeepSeek 服务器繁忙的全面解决方案

目录 引文 正文 一、 服务器繁忙的原因分析 二、 解决方案 2.1切换网络 2.2使用网络加速工具 2.3错峰使用DeepSeek 2.4本地部署 2.5调用API 三、官方动态 一、技术研发与产品升级 二、市场合作与商业化进展 三、区域化布局与产业赋能 四、未来规划与社会责任 结语…...

将OpenWrt部署在x86服务器上

正文共&#xff1a;1234 字 40 图&#xff0c;预估阅读时间&#xff1a;2 分钟 如果你问ChatGPT有哪些开源的SD-WAN方案&#xff0c;他会这样答复你&#xff1a; 我们看到&#xff0c;OpenWrt也属于比较知名的开源SD-WAN解决方案。当然&#xff0c;在很久之前&#xff0c;我就发…...

计算机视觉:卷积神经网络(CNN)基本概念(一)

第一章&#xff1a;计算机视觉中图像的基础认知 第二章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(一) 第三章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(二) 第四章&#xff1a;搭建一个经典的LeNet5神经网络 一、引言 卷积神经网络&…...

企业文件共享中的权限管理与安全风险防范

在企业的日常运营中&#xff0c;文件共享是必不可少的一项工作。然而&#xff0c;文件共享过程中如果权限管理不当&#xff0c;极易引发安全风险&#xff0c;导致企业敏感信息泄露。因此&#xff0c;加强文件共享中的权限管理与安全风险防范&#xff0c;对于保障企业信息安全至…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...