Adobe DC View SDK PDF预览异常：首次加载正常，重载/跳转后空白

问题概述 #

• 集成SDK的页面首次加载（浏览器常规窗口/无痕窗口）时，PDF预览正常显示
• 刷新页面或跳转到其他含PDF预览的页面后，预览区域变为空白，浏览器控制台无任何报错信息
• 已排除clientId密钥错误或过期问题（若为此原因，首次加载也会失败）

技术栈 #

• .NET Framework 4.7.2
• jQuery 3.6.0

原实现代码 #

$(document).ready(function() {
        document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
            var adobeDCView = new AdobeDC.View({ clientId: SOME_KEY, divId: $('#adobeDcViewId{Id}').val() });
            adobeDCView.previewFile({
                content: { location: { url: $('#hdnUrl{Id}').val() } },
                metaData: { fileName: $('#hdnFileName{Id}').val()  }
            }, 
        { 
        showDownloadPDF: $('#hdnRestrictDownload{Id}').val() !== 'true', 
        showPrintPDF: $('#hdnRestrictDownload{Id}').val() !== 'true' 
        });
        });
});

问题原因分析 #

1. 重复绑定SDK就绪事件：每次页面刷新或跳转后，$(document).ready都会重新执行，导致多次绑定adobe_dc_view_sdk.ready事件，重复创建AdobeDC.View实例，引发内部冲突
2. 实例未正确销毁：旧页面的AdobeDC.View实例未销毁，与新页面实例产生资源竞争
3. 容器元素状态异常：页面跳转后，容器元素可能未完全渲染完成就执行初始化逻辑，导致SDK无法正确挂载

修复方案 #

1. 优化初始化逻辑，避免重复创建实例 #

// 全局存储SDK实例，用于后续销毁
let adobeDCViewerInstance = null;

// 封装初始化函数
function initPDFViewer(containerId, fileUrl, fileName, allowActions) {
    // 销毁已有实例，避免冲突
    if (adobeDCViewerInstance) {
        adobeDCViewerInstance.destroy();
        adobeDCViewerInstance = null;
    }

    // 校验容器元素是否存在
    const container = document.getElementById(containerId);
    if (!container) return;

    // 创建新实例并加载PDF
    adobeDCViewerInstance = new AdobeDC.View({
        clientId: 'YOUR_CLIENT_ID',
        divId: containerId
    });

    adobeDCViewerInstance.previewFile({
        content: { location: { url: fileUrl } },
        metaData: { fileName: fileName }
    }, {
        showDownloadPDF: allowActions,
        showPrintPDF: allowActions
    });
}

// 确保SDK就绪事件仅绑定一次
document.addEventListener("adobe_dc_view_sdk.ready", function() {
    // 页面首次加载时初始化
    const containerId = $('#adobeDcViewId{Id}').val();
    const fileUrl = $('#hdnUrl{Id}').val();
    const fileName = $('#hdnFileName{Id}').val();
    const allowActions = $('#hdnRestrictDownload{Id}').val() !== 'true';
    
    initPDFViewer(containerId, fileUrl, fileName, allowActions);

    // 针对页面跳转场景：导航后重新初始化（根据实际导航逻辑调整选择器）
    $(document).on('click', 'a[href^="/"]', function() {
        // 延迟执行，确保新页面DOM渲染完成
        setTimeout(() => {
            const newContainerId = $('#adobeDcViewId{Id}').val();
            const newFileUrl = $('#hdnUrl{Id}').val();
            const newFileName = $('#hdnFileName{Id}').val();
            const newAllowActions = $('#hdnRestrictDownload{Id}').val() !== 'true';
            
            initPDFViewer(newContainerId, newFileUrl, newFileName, newAllowActions);
        }, 300);
    });
}, { once: true }); // 事件仅触发一次，防止重复绑定

2. 额外排查点 #

• 容器元素样式校验：确保预览容器设置了明确的宽高，例如：

  #your-preview-container {
      width: 100%;
      height: 80vh;
      min-height: 600px;
  }
  

• PDF文件跨域设置：确认PDF文件所在服务器已配置CORS，允许当前域名访问（可通过浏览器网络面板检查请求状态）
• SDK脚本加载方式：确保SDK脚本仅在页面中引入一次，避免重复加载引发冲突

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