如何让<embed>标签中PDF缩略图菜单默认处于收起状态？

我目前用<embed>标签在网页中展示PDF，代码如下：

<div>
    <embed src={sourceURL} type="application/pdf" />
</div>

这个原生PDF查看器带有可展开/收起的缩略图菜单，但不同浏览器行为不一致：Chrome会记住菜单的状态（刷新或重访页面时维持之前的展开/收起状态），而部分浏览器每次加载都默认展开菜单。查阅<embed>标签的属性文档后，发现没有现成参数能强制菜单默认收起。

可行方案：替换为第三方PDF库 #

原生浏览器通过<embed>调用的PDF查看器，并未暴露控制侧边栏（缩略图菜单）状态的公开API，因此无法直接通过<embed>实现默认收起菜单的需求。推荐使用PDF.js这类开源PDF渲染库，它能完全自定义PDF的展示行为：

PDF.js允许你在初始化时配置默认隐藏缩略图面板，核心实现步骤如下：

• 引入PDF.js库文件（可使用CDN或本地部署）
• 初始化查看器时设置sidebarViewOnLoad: false，强制默认收起侧边栏

示例核心代码：

// 获取PDF容器元素
const pdfContainer = document.getElementById('pdf-container');
// 初始化PDF查看器，配置默认隐藏侧边栏
const viewer = new PDFViewer({
  container: pdfContainer,
  sidebarViewOnLoad: false
});

// 加载目标PDF文档
const loadingTask = pdfjsLib.getDocument('your-pdf-file.pdf');
loadingTask.promise.then(pdf => {
  viewer.setDocument(pdf);
});

这种方式不仅能统一各浏览器的展示行为，确保菜单默认收起，还能获得更多自定义能力，比如修改工具栏样式、添加批注功能等。

内容的提问来源于stack exchange，提问作者ReactDev