pdf.js插件怎么控制工具栏的显示与隐藏

您所在的位置:网站首页 如何解锁pdf的工具栏的功能 pdf.js插件怎么控制工具栏的显示与隐藏

pdf.js插件怎么控制工具栏的显示与隐藏

2024-06-04 08:33| 来源: 网络整理| 查看: 265

最近做了一个需求,需要实现pdf文件的预览,但是只是提供预览功能,不需要展示相关的工具栏,所以需要把工具栏隐藏掉。我用的插件是pdf.js

官网地址:http://mozilla.github.io/pdf.js/ 中文文档地址:https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/print.html

1、pdf.js包的目录结构 ├── build/ │ ├── pdf.js - 显示层 │ ├── pdf.js.map - 显示层source map │ ├── pdf.worker.js - 核心层 │ └── pdf.worker.js.map - 核心层source map ├── web/ │ ├── cmaps/ - character maps (required by core) │ ├── compressed.tracemonkey-pldi-09.pdf - PDF文件,用于测试目的 │ ├── debugger.js - 用于debug │ ├── images/ - 图标 │ ├── locale/ - 本地化文件 │ ├── viewer.css - 样式 │ ├── viewer.html - 用于展示的html文件 │ ├── viewer.js - 展示层 │ └── viewer.js.map - 展示层source map └── LICENSE 2、怎么把工具栏隐藏掉呢?

我直接采用的是样式隐藏的方式,修改了pdf.js的css源码,

在viewer.css中有关于工具栏的样式,class类名为toolbar(可以在viewer.css中全局搜.toolbar)

.toolbar{ position: relative; z-index: 9999; cursor: default; ... }

可以给.toolbar加一个display: none; 把工具栏全部隐藏掉; 代码如下:

.toolbar{ display: none; position: relative; z-index: 9999; cursor: default; ... }

当然也可以通过js中设置一些属性值来进行控制,这个后面会做总结;



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3