IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> js禁用浏览器 pdf 打印、下载功能(pdf.js 禁用打印下载、功能) -> 正文阅读

[JavaScript知识库]js禁用浏览器 pdf 打印、下载功能(pdf.js 禁用打印下载、功能)

前端实现 pdf 预览方法

(1)用iframe标签src="文件地址"就可以直接打开,还可以设置width,height等属性。具体参考iframe属性

?<iframe?src="http://localhost:8080/%E9%9F%A6%E6%88%90%E7%8E%89.pdf"></iframe>?

(2)直接a标签src="文件地址"

<a href="文件地址"></a>

(3)使用微软的方法微软官方文档(有缺陷不建议使用)

(4)使用插件

vue 中 实现pdf预览

上面的 1,2,3都可以使用,但1,2,3 使用的是 浏览器自带的 pdf预览功能,样式不统一,如果介意的话 就只能 使用插件了。

4的话插件有?vue-pdf、pdf.js 等。

react 中 实现pdf预览

上面的 1,2,3都可以使用,但1,2,3 使用的是 浏览器自带的 pdf预览功能,样式不统一,如果介意的话 就只能 使用插件了。

4的话插件有?react-pdf、pdf.js、react-file-viewer等。

React中使用react-file-viewer,实现预览office文件(pdf,word,xlsx等文件)前端实现,在浏览器打开文件_崽崽的谷雨的博客-CSDN博客_react-file-viewer

禁用 pdf打印功能?

用插件自带的api

pdf.js 禁用

通过pdfjs实现在VUE-CLI中进行PDF预览,并禁用打印及下载功能_qq_24800489的博客-CSDN博客_iframe预览pdf文件流

其它插件 大同小异 ,可以自行 查资料。

用js 禁用

?其实这个也不算是禁用,只是 把 按钮 和图标 隐藏了。

1.以 谷歌浏览器自带的为例子

快速打开的方法就是 拖动pdf到浏览器 里就能看到。?

谷歌浏览器 打开 pdf 截图

?

思路: 就是 用js隐藏下载的 图标

? ? 获取到 图标 给其 隐藏

? ? 这一步看起来 简单 但是 我一开始 试了很多遍都不行,因为 涉及到shadow-root

? 截图如下:

shadow-root 截图

审查元素 会发现 dom被 shadow-root 包裹,所以 获取元素 就不能用常规的 document方法,需要使用shadowRoot。

 let c = document.querySelector("#viewer").shadowRoot.querySelector("#toolbar").shadowRoot.querySelector("#print");
    c.remove();

运行这个代码 会发现 打印的图标消失了,如果下载也要 消失 用同一个方法即可。?

去除打印图标

?快速获取 想要元素的 js代码技巧:

? ?1.选中元素 然后 鼠标右击?

? ?2.选择 copy 里的 copy js path 即可

?Copy js path 复制 js 路径? 快速生成 获取 该dom的 js代码 (很实用)

? 效果如下:

? 比如想要 下载 图标也消失 按照上面的 步骤 就可以获取到 。然后 就可以 加 remove或者 修改样式,修改内容都行。

document.querySelector("#viewer").shadowRoot.querySelector("#toolbar").shadowRoot.querySelector("#downloads").shadowRoot.querySelector("#download");

2. edge 也差不多?

?edge 都是 中文的操作步骤同上

1.选中元素 然后 鼠标右击?

2.选择 复制?里的 复制js路径 即可

edge 截图

?去除效果 如下:

总结:

我 这个只是 隐藏了 ,你可以获取到元素后 接着 拓展 比如: 更换图标 ,修改样式 等等。

谷歌浏览器 控制台使用技巧

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-25 18:01:20  更:2022-06-25 18:02:43 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年9日历 -2024/9/22 21:26:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码