Autodesk Forge v7.55中PDFExtension无法加载PDF问题排查

问题根因排查 #

1. loadModel参数错误：你代码中viewer.loadModel(pdf, viewer)第二个参数应该是加载配置对象，而非Viewer实例，错误的传参导致加载逻辑异常，触发循环请求。
2. 相对协议URL适配问题：你使用的//开头的无协议URL会自动继承当前页面的协议，如果你是在本地file://协议下打开页面，会自动拼接为file://dd7tel2830j4w.cloudfront.net/...，自然返回404。
3. CORS跨域限制：即使你有权限访问PDF资源，如果资源所在的服务端没有配置允许你当前站点跨域访问，浏览器会拦截请求，部分服务端会将跨域请求直接返回404状态码伪装成资源不存在。

修复步骤 #

1. 修正loadModel传参，第二个参数保留为空对象或者传正确的加载配置
2. 给PDF URL补全https://协议头，避免相对协议适配错误
3. 确认PDF资源服务端配置了正确的CORS规则，允许你的站点跨域访问
4. 移除不必要的viewer实例传参，优化初始化逻辑

修正后的代码如下：

let htmlViewer = "<div id=forgeViewer></div>";
//The Viewer will be instantiated here
instance.canvas.append(htmlViewer);

let viewer, markup;

function initializeViewer(pdf) {
    if (viewer) {
        console.log('loading');
        viewer.impl.unloadCurrentModel()
        if (markup) 
            markup.hide();
        // 修正第二个参数为配置对象
        viewer.loadModel(pdf, {});
        return;
    }
    var options = {
        env: "Local",
        useADP: false
    }

    Autodesk.Viewing.Initializer(options, () => {
        viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
        viewer.setTheme("light-theme");
        viewer.start();
        if (!pdf) return;

        viewer.loadExtension('Autodesk.PDF').then( () => {
            // 修正第二个参数为配置对象
            viewer.loadModel(pdf, {});
        });
    });
}

// 补全URL协议头
initializeViewer('https://dd7tel2830j4w.cloudfront.net/f1635895094123x658226723587068400/sample.pdf');

额外排查点 #

如果修复后依然返回404，可以在浏览器新标签页直接打开PDF的完整URL确认是否可以正常访问，如果可以正常访问但Viewer加载时404，可确认是CORS配置问题，需要联系PDF资源的运维人员配置跨域规则，允许你的站点的Origin访问。

内容的提问来源于stack exchange，提问作者Dr. Crunch