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

最近做了一个需求,需要实现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中设置一些属性值来进行控制,这个后面会做总结;

猜你喜欢

转载自blog.csdn.net/xiaolinlife/article/details/134580710
今日推荐