如何结合JSON动态切换Cloud PDF.io查看器中的PDF文档

核心思路 #

先确保Cloud PDF.io查看器的实例instance在全局作用域可访问，然后在AJAX请求成功拿到documentId后，直接调用instance.loadDocument()方法传入新ID即可完成文档切换。

具体实现代码 #

1. 保留查看器实例的全局访问权限

初始化查看器时，把实例挂载到全局对象（比如window）上，确保后续能调用到：

// 初始化Cloud PDF.io查看器
window.pdfViewerInstance = null;

CloudPDFViewer({
  licenseKey: '你的授权密钥',
  container: '#pdf-viewer-container' // 对应页面中查看器的容器ID
}).then(instance => {
  window.pdfViewerInstance = instance;
  // 可选：加载初始文档
  instance.loadDocument({documentId: '初始文档ID'});
});

2. 绑定选择器事件并处理AJAX请求

假设你用jQuery处理事件和AJAX：

// 给所有.documents元素绑定点击事件
$('.documents').on('click', function() {
  // 从元素上获取文档标识（比如自定义data属性，用来传给后端确定返回哪个documentId）
  const targetDoc = $(this).data('doc-key');

  $.ajax({
    url: '{{ path('docs_change_document') }}',
    method: 'GET', // 按后端接口要求选GET/POST
    data: {
      docKey: targetDoc // 传给后端的参数，用于返回对应documentId
    },
    dataType: 'json',
    success: function(res) {
      // 检查查看器实例是否已初始化
      if (window.pdfViewerInstance) {
        // 调用loadDocument切换文档
        window.pdfViewerInstance.loadDocument({
          documentId: res.documentId // 对应后端返回的JSON键名
        });
      } else {
        console.error('PDF查看器未完成初始化');
      }
    },
    error: function(xhr, err) {
      console.error('获取documentId失败:', err);
    }
  });
});

如果用原生JavaScript实现：

// 绑定所有.documents元素的点击事件
document.querySelectorAll('.documents').forEach(el => {
  el.addEventListener('click', function() {
    const targetDoc = this.dataset.docKey;
    const xhr = new XMLHttpRequest();
    
    xhr.open('GET', `${{ path('docs_change_document') }}?docKey=${encodeURIComponent(targetDoc)}`);
    xhr.responseType = 'json';
    
    xhr.onload = function() {
      if (xhr.status === 200 && window.pdfViewerInstance) {
        window.pdfViewerInstance.loadDocument({
          documentId: xhr.response.documentId
        });
      } else {
        console.error(xhr.status === 200 ? '查看器未初始化' : '请求失败');
      }
    };
    
    xhr.onerror = function() {
      console.error('网络请求出错');
    };
    
    xhr.send();
  });
});

关键注意事项 #

• 确认后端返回的JSON结构中，documentId的键名和代码中使用的一致，比如后端返回{"id": "xxx"}，就要改成res.id。
• 如果.documents元素是动态生成的，要使用事件委托（比如jQuery的$(document).on('click', '.documents', function(){...})），避免事件失效。
• 必须等查看器实例完全初始化后再调用loadDocument，否则会触发报错。

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