如何在 PDF.js 中切换 PDF 图层的可见性答案

【问题标题】：How to toggle visibility of a PDF layer in PDF.js如何在 PDF.js 中切换 PDF 图层的可见性
【发布时间】：2021-03-08 04:58:29
【问题描述】：

我有一个包含多个图层的 PDF 文件。在 Adobe Acrobat 中，我可以通过 PDF 中包含的 JavaScript 切换这些图层的可见性。 PDF.js 与许多其他查看器一样，不支持 PDF 中的 JS。但是图层显示在查看器的侧窗格中 - 我可以在其中切换可见性。如何通过 JS 切换可见性，由查看器外部的按钮触发？

【问题讨论】：

标签： javascript pdf pdf.js

【解决方案1】：

克隆此项目https://github.com/mozilla/pdf.js.git 并使用位于 web/viewer.js 的查看器。以下 JavaScript 代码创建一个按钮并向其添加一个事件侦听器。事件监听器调用函数PDFViewerApplication.pdfLayerViewer._optionalContentConfig.setVisibility()调整可见性，调用PDFViewerApplication.pdfLayerViewer.eventBus.dispatch()更新状态。

//Create a button a position it
let btn = document.createElement("button")
btn.style.zIndex = 100;
btn.style.zIndex = 100
btn.style.position = "absolute"
btn.style.height = "30px"
btn.style.top = "100px"
btn.style.left = "200px"
btn.innerHTML = "Toggle Layer"


//store the state
btn.visibilityStatus = false

//bind event to it
btn.addEventListener("click", () => { 
    //toggleVariable
    btn.visibilityStatus = !btn.visibilityStatus

    //set the layer visibility 
    //setVisibility(Layer-ID, visibility)
    PDFViewerApplication.pdfLayerViewer._optionalContentConfig.setVisibility("10113R", btn.visibilityStatus)

    //Apply changes
    PDFViewerApplication.pdfLayerViewer.eventBus.dispatch("optionalcontentconfig", {
        source: PDFViewerApplication.pdfLayerViewer,
        promise: Promise.resolve(PDFViewerApplication.pdfLayerViewer._optionalContentConfig),
    });
  })

document.body.prepend(btn)

【讨论】：