如何在PDFTron的WebView中通过URL加载多份文档并实现动态按钮加载功能

你可以通过以下几种常用方案解决instance的跨作用域访问问题，适配动态生成按钮的场景：

方案1：外层作用域声明变量存储instance #

这是最直接的实现方式，在promise外部提前声明变量接收instance实例即可：

// 外层作用域提前声明变量存储实例
let viewerInstance = null

// 初始化WebViewer
WebViewer({
  // 你的原有配置项
}, viewerElement)
.then(instance => {
  // 初始化完成后给外层变量赋值
  viewerInstance = instance
  // 可选：初始化完成后启用所有加载按钮，避免实例未就绪时点击报错
  document.querySelectorAll('.pdf-load-btn').forEach(btn => btn.disabled = false)
})

// 动态生成按钮的逻辑示例
function generateDocBtns(docList) {
  const container = document.getElementById('btn-container')
  docList.forEach(doc => {
    const btn = document.createElement('button')
    btn.textContent = doc.docName
    btn.disabled = true // 实例未就绪前禁用
    // 存储文档参数到自定义属性
    btn.dataset.docUrl = doc.url
    btn.dataset.docId = doc.id
    btn.addEventListener('click', () => {
      // 调用存储的实例加载文档
      if (viewerInstance) {
        viewerInstance.loadDocument(btn.dataset.docUrl, {
          documentId: btn.dataset.docId
        })
      }
    })
    container.appendChild(btn)
  })
}

注意：需要确保点击按钮时WebViewer已经初始化完成，viewerInstance已经被赋值。

方案2：自定义事件机制（更解耦） #

通过自定义事件实现按钮和WebViewer逻辑的解耦，不需要依赖全局变量，即使按钮在WebViewer初始化前生成也不会报错：

// 初始化WebViewer的时候绑定自定义事件监听
WebViewer({
  // 你的原有配置项
}, viewerElement)
.then(instance => {
  // 监听自定义的加载文档事件
  window.addEventListener('load-pdf-document', (e) => {
    const { docUrl, docId } = e.detail
    instance.loadDocument(docUrl, { documentId: docId })
  })
})

// 动态生成按钮的逻辑示例
function generateDocBtns(docList) {
  const container = document.getElementById('btn-container')
  docList.forEach(doc => {
    const btn = document.createElement('button')
    btn.textContent = doc.docName
    btn.addEventListener('click', () => {
      // 触发自定义事件传递文档参数
      const event = new CustomEvent('load-pdf-document', {
        detail: {
          docUrl: doc.url,
          docId: doc.id
        }
      })
      window.dispatchEvent(event)
    })
    container.appendChild(btn)
  })
}

如果是使用Vue/React等框架的项目，可以把instance存储到框架的全局状态中：React可以存在useRef或者状态管理容器里，Vue可以存在ref变量或者Pinia/Vuex中，逻辑和方案1一致。

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