邓琨腾1. 初识pdf.js工具栏控制
第一次接触pdf.js的工具栏隐藏需求时，我也像大多数开发者一样，直接想到用CSS暴力隐藏。这个思路确实简单粗暴有效，就像给房间的开关贴上了胶布 - 虽然能用，但总觉得少了点灵活性。pdf.js作为Mozilla开源的PDF渲染引擎，其实提供了更优雅的动态控制方式。
在web/viewer.css文件中，工具栏相关的样式集中在.toolbar类。默认情况下，这个工具栏包含了缩放按钮、页码导航、下载打印等实用功能。通过Chrome开发者工具检查元素，你会发现整个工具栏实际上由多个嵌套的div组成，最外层就是我们要控制的.toolbar容器。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 静态隐藏：CSS覆盖方案
2.1 直接修改源码的利弊
最直接的方法就是修改viewer.css源文件，给.toolbar添加display:none。我在早期项目中也这样做过，优点是见效快，一行代码就能让工具栏消失得无影无踪。但后来发现这种方案存在明显问题：每次更新pdf.js版本时，都需要重新修改这个文件，维护成本高。
css复制/* 直接修改viewer.css的方案 */
.toolbar {
display: none !important;
/* 保留其他原有样式 */
}
2.2 更安全的覆盖方案
后来我改用外部CSS覆盖的方式，这样既不会污染源码，也便于维护。具体做法是在调用viewer.html的页面中，通过link引入自定义CSS文件，或者在style标签中重写样式：
html复制<!-- 在调用pdf viewer的HTML文件中 -->
<style>
#viewerContainer .toolbar {
display: none !important;
}
</style>
这里用了更具体的选择器#viewerContainer .toolbar，并加上!important确保覆盖优先级。实测下来，这种方案在大多数场景下都很稳定，但要注意CSS加载时机，避免闪烁问题。
3. 动态控制：JavaScript API的妙用
3.1 认识PDFViewerApplication对象
pdf.js在viewer.js中暴露了全局对象PDFViewerAppl