KKFileView在线预览禁用复制右键图片保存等操作

news2025/7/17 11:01:55

KKFileView在线预览禁用复制右键图片保存等操作

  • 一、需求背景
  • 二、修改kkFileview
    • 1.docx、doc文档不可复制、F12、右键、打印限制问题
    • 2.图片限制拖拽处理
    • 3.限制Excel转换后复制等操作
    • 4.PDF模式禁用右上角菜单栏


一、需求背景

公司的运营平台,管理了一些如合同等内容,开始使用了kkfileView预览组件进行合同的预览,能查看,能下载,满合了日常需求,但现在需要对预览进行更严格一点的控制,需要做到只能让普通用户进行带水印查看,不让下载,连图片保存都不行,因此需要对kkfileView进行一些如打印成pdf,图片保存,右键复制限制等功能。

也看了些csdn上的解决方案文章,其中KKFileView在线预览初使用记录,主要解决不可复制等一些限制问题https://blog.csdn.net/qq_37637196/article/details/119108471
文章中的内容较符合要求,此文内容是转载了上面文章,备查使用,记录如下:

二、修改kkFileview

1.docx、doc文档不可复制、F12、右键、打印限制问题

在commonHeader.ftl文中添加

<#-- 设置浏览器打印为空白内容,防止打印 -->
<style>@media print{body{display:none}}</style>

<script language="Javascript">

    //禁用右键(防止右键查看源代码)
    window.oncontextmenu = function () { return false; }
    //禁止任何键盘敲击事件(防止F12和shift+ctrl+i调起开发者工具)
    window.onkeydown = window.onkeyup = window.onkeypress = function () {
        window.event.returnValue = false;
        return false;
    }
    //如果用户在工具栏调起开发者工具,那么判断浏览器的可视高度和可视宽度是否有改变,如有改变则关闭本页面
    var h = window.innerHeight, w = window.innerWidth;
    window.onresize = function () {
        if (h != window.innerHeight || w != window.innerWidth) {
            window.close();
            window.location = "about:blank";
        }
    }
    /**
     * 禁止右键和复制
     */
    document.oncontextmenu=new Function("event.returnValue=false");
    document.onselectstart=new Function("event.returnValue=false");
</script>

在file-online-preview/server/src/main/resources/static/pdfjs/web/viewer.html添加

<!--设置浏览器打印为空白内容,防止打印-->
    <style>@media print{body{display:none}}</style>

2.图片限制拖拽处理

	// 禁止浏览器默认拖拽,防止拖拽到新的tab窗口
    document.getElementsByTagName('img')[0].onmousedown = function(e){
        e.preventDefault();
    };

3.限制Excel转换后复制等操作

在 FileHandlerService 类 doActionConvertedFile 方法中添加HTML script ;
// 添加sheet控制头
sb.append("<script src=“js/jquery-3.0.0.min.js” type=“text/javascript”>");
sb.append("<script src=“js/excel.header.js” type=“text/javascript”>");
sb.append("<link rel=“stylesheet” href=“bootstrap/css/bootstrap.min.css”>");
// 在这添加下方代码;
// 添加禁止复制功能
            sb.append("<script language=\"Javascript\">\n" +
                    "\n" +
                    "    //禁用右键(防止右键查看源代码)\n" +
                    "    window.oncontextmenu = function () { return false; }\n" +
                    "    //禁止任何键盘敲击事件(防止F12和shift+ctrl+i调起开发者工具)\n" +
                    "    window.onkeydown = window.onkeyup = window.onkeypress = function () {\n" +
                    "        window.event.returnValue = false;\n" +
                    "        return false;\n" +
                    "    }\n" +
                    "    //如果用户在工具栏调起开发者工具,那么判断浏览器的可视高度和可视宽度是否有改变,如有改变则关闭本页面\n" +
                    "    var h = window.innerHeight, w = window.innerWidth;\n" +
                    "    window.onresize = function () {\n" +
                    "        if (h != window.innerHeight || w != window.innerWidth) {\n" +
                    "            window.close();\n" +
                    "            window.location = \"about:blank\";\n" +
                    "        }\n" +
                    "    }\n" +
                    "    /**\n" +
                    "     * 禁止右键和复制\n" +
                    "     */\n" +
                    "    document.οncοntextmenu=new Function(\"event.returnValue=false\");\n" +
                    "    document.onselectstart=new Function(\"event.returnValue=false\");\n" +
                    "</script>");

4.PDF模式禁用右上角菜单栏

如下,需要将pdf预览中的几个按钮隐藏,通过修改样式为display:none来处理
在这里插入图片描述
将viewer.html中的几个按钮的样式改成display:none即可

presentationMode
openFile
print
viewBookmark
设置样式:display:none

在这里插入图片描述
缩小屏幕宽度时还有几个也要设置
在这里插入图片描述

secondaryPresentationMode
secondaryOpenFile
secondaryPrint
secondaryDownload
secondaryViewBookmark

在这里插入图片描述

另外:也需要将前面的禁用复制、右键、f12等限制在viewer.html中加上

经过以上的限制后,能限制不懂开发者工具的人进行操作,但想要禁用开发者工具,前端的处理效果还是不怎么好,那就最好直接通过后台代码控制限制了

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

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

相关文章

【记录】软件自动修复工具Jaid配置、调试、运行及相关问题的解决方案

文章目录1. 前言2. Jaid原论文3. 环境4. 配置5. 调试6. 碰到的问题7. 一些发现8. 小结9. 参考文献1. 前言 创作开始时间&#xff1a;2022年11月18日20:50:38 如题&#xff0c;本文记录一下软件自动修复工具Jaid配置、调试、运行及相关问题的解决方案。 2. Jaid原论文 【ASE…

Jenkins+Docker+SVN实现SpringBoot项目半自动化部署

起因&#xff1a;入职后公司需要的技能&#xff0c;全部项目都使用的JenkinsDocker部署 Jenkins详细教程&#xff1a;知乎大佬写的文章 Docker详细教程&#xff1a;一个大佬的博客 SVN使用教程&#xff1a;一个大佬的博客 深入了解Jenkins、Docker、SVN&#xff0c;去上面三个大…

图书管理系统【java】

目录 &#x1f947;1.设计背景 &#x1f50e;2.设计思路 &#x1f511;3.book包 &#x1f4d7;3.1 Book类的实现 &#x1f4d5;3.2 BookList类的实现(书架) &#x1f511;4.user包 &#x1f4d9;4.1 User类的实现 &#x1f4d2;4.2 AdminUser&#xff08;管理员&#x…

MySQL导出csv数据文件

之前使用MySQL导出过一次线上数据&#xff0c;当时解决了乱码和数据没有正常分隔的问题。 参见这篇文章: 记一次“曲折“的MySQL数据导出 前几个月换了工作电脑&#xff0c;这几天又需要导出几十万的线上数据&#xff0c;在导出过程中还是出现了一些问题&#xff0c;再记录一…

OpenWrt 固件编译教程

一、编译环境准备 编译平台 阿里云 Ubuntu 20.04.5 LTS 安装编译环境依赖 sudo apt-get -y install build-essential asciidoc binutils bzip2 gawk gettext git libncurses5-dev libz-dev patch python3 python2.7 unzip zlib1g-dev lib32gcc1 libc6-dev-i386 subversion f…

ICME 会议介绍

官网翻译来的&#xff0c;具体内容还是看官网&#xff1a;IEEE ICME23 Author Information and Submission Instructions 目录 常会和特别会议 研讨会 行业/应用文件 演示 一般信息 示例文件、格式化指南和模板 电子论文提交 提交论文的分步说明 感兴趣的主题包括但不…

右键发送到菜单+批处理实现批量自动化为文件名添加统一的后缀

WinR打开运行&#xff0c;并输入shell:sendto&#xff0c;打开系统右键发送到菜单的所在文件夹。 新建记事本文档&#xff0c;修改文件名为公开.bat&#xff0c;编辑并保存如下内容&#xff1a; echo off :loop if not "%~1" "" (ren "%~1" &…

[附源码]SSM计算机毕业设计在线二手车交易信息管理系统JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Linux系统配置 Samba客户端

配置 Samba客户端 1.Windows 客户端访问 samba 共享 无论Samba共享服务是部署在Windows系统上&#xff0c;还是部署在Linux系统上&#xff0c;通过Windows系统进行访问时&#xff0c;其步骤和方法都是一样的。下面假设Samba共享服务部署在Linux系统上&#xff0c;并通过Wind…

11返场钜惠,格式转换、图片/视频压缩免费小技巧

&#x1f4e3; 话不多说&#xff0c;直接上干货&#xff01; &#x1f525; 11返场钜惠&#xff0c;牛学长转码大师免费送&#xff01;&#xff01;&#xff01;&#x1f525; 那么牛学长转码大师能帮助您些什么呢&#xff1f;一起看看吧~ 一、格式转换 作为一款专业的格式…

Redis集群部署的三种模式

一、Redis简介 Redis 是一款完全开源免费、遵守BSD协议的高性能(NOSQL)的key-value数据库。它使用ANSI C语言编写&#xff0c;支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 Redis的使用场景有如下一些&#xff1a; 读写效率要…

计算机网络复习——第四章网络层

9月开始学习的一个月&#xff0c;I hope everthing be fine. 相关知识见&#xff0c;感觉比较容易入手 《计算机网络》&#xff08;谢希仁&#xff09;内容总结 | JavaGuide 重点知识&#xff1a; TCP/IP 协议中的网络层向上只提供简单灵活的&#xff0c;无连接的&#xff…

[附源码]SSM计算机毕业设计在线购物商城JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

C/C++多进程高并发框架分享【内附可执行源码注释完整】

文章目录&#x1f680;前言&#x1f34e;源码分享&#x1f382;总结&#x1f680;前言 多进程高并发的设计的思想体现在&#xff1a;电脑物理CPU有多少个核&#xff08;core&#xff09;就创建多少个子进程&#xff0c;并且把各个子进程平均分配到各个核&#xff08;core&…

【JavaSE】多态、抽象类

文章目录1. 向上转型2. 重写3. 多态4. 向下转型5. 抽象类1. 向上转型 我们来看看以下程序 class Animal {public String name;public int age;public void eat() {System.out.println("父类的方法");} } class Cat extends Animal {public String hire;public void…

Birdboot第六天 jar包 数据库

实际应用birdboot框架 1.BirdBoot导包 1.新建maven BirdBoot------pom替换 2.删掉static 和 Springboot里面写的&#xff08;controller entity&#xff09; rebuild之后把无用的导包都删掉 主启动类里面把main方法改为run方法 传参&#xff1a;类名和参数&#xff08;复制sp…

动力节点索引优化解决方案学习笔记——索引介绍

1.索引介绍 1.1什么是MySQL的索引 MySQL官方对于索引的定义&#xff1a;索引是帮助MySQL高效获取数据的数据结构。 MySQL在存储数据之外&#xff0c;数据库系统中还维护着满足特定查找算法的数据结构&#xff0c;这些数据结构以某种引用(指向)表中的数据&#xff0c;这样我们…

决策树算法

目录 ​分类算法 决策树算法 外卖订餐决策树 分支处理 分类算法 分类算法是利用训练样本集获得分类函数即分类模型(分类器)&#xff0c;从而实现将数据集中的样本划分到各个类中。分类模型通过学习训练样本中属性集与类别之间的潜在关系&#xff0c;并以此为依据对新样本属…

测试基础——数据库及数据库表的SQL操作(了解即可)

目录 1.数据库基础概念 2.SQL介绍 3.MySQL介绍 4.数据库连接工具Navicat 5.数据类型 6.约束 7.对数据库操作的SQL语句 7.1创建数据库 7.2使用/打开/切换数据库 7.3修改数据库 7.4删除数据库 7.5查看所有数据库 7.6数据库备份 8.数据库表操作的SQL语句 8.1创建数据…

VisualSFM的配置与使用 MeshLab的网格生成与纹理添加

前言 本实验环境如下&#xff1a; VisualSFM版本V0.5.26 MeshLab版本2022.02 操作系统Windows10&#xff0c;64bit 0 VisualSFM配置 0.1 下载 VisualSFM下载链接&#xff1a;VisualSFM : A Visual Structure from Motion System Cmvs-Pmvs下载链接&#xff1a;GitHub -…