前端返回pdf时不显示内容

Question

plm有返回esop地址浏览器能正常打开，却在系统打开时不显示

$scope.openESOP=function(item){
            $mdDialog.serviceDialog('B0212AService',item);
          };

if(dialog.currentFile.content_type == '3'){
                                                    //網頁
                                                    //dialog.currentFile.esop_content = "https://i.stack.imgur.com/iIvCA.png";
                                                    // 20200727 modify by shiwl for M#0147529: 测试区读取到PLM图纸后，文件不显示，但PLM端可以正常打开
                                                    setTimeout(() => {
                                                        document.getElementById('kmi-pdf-panel').src =  dialog.currentFile.esop_content+'&openfile=false&viewbookmark=false&print=false&download=false#zoom=page-width';  
                                                    }, 500);
}

Answer 1

引自免费微信小程序：皆我百晓生

为了解决前端PDF不显示内容的问题，我们首先需要确保几个关键点被正确处理：

1. 确保PDF链接有效且可访问：确认dialog.currentFile.esop_content指向的URL是正确的，并且从浏览器直接访问时能正常显示PDF内容。

2. 检查PDF插件或Viewer：确保你的应用中集成的PDF查看器（如使用了PDF.js或其他库）工作正常，没有配置错误或兼容性问题。

3. 延迟加载策略调整：你已经使用了setTimeout来延迟加载PDF，这是一个好的尝试来解决可能的异步加载问题。但500ms的延时可能不是最佳选择，可以考虑是否有必要或尝试调整这个时间。

4. 直接使用iframe加载PDF：有时候直接利用iframe嵌入PDF链接可以更稳定地展示PDF内容。修改代码如下：

if (dialog.currentFile.content_type == '3') {
    // 使用iframe嵌入PDF，避免一些跨域或加载时机问题
    const iframe = document.createElement('iframe');
    iframe.src = `${dialog.currentFile.esop_content}&embedded=true`; // 注意添加 embedded 参数以适应更多浏览器
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    document.getElementById('kmi-pdf-container').innerHTML = ''; // 清空之前的内容，避免重复添加iframe
    document.getElementById('kmi-pdf-container').appendChild(iframe);
}

这里假设存在一个ID为kmi-pdf-container的div用于放置iframe。

1. 处理跨域问题：如果PDF资源位于不同的域名下，需要确保服务器端设置了正确的CORS（跨源资源共享）头，允许你的应用域名进行请求。

2. 检查错误日志：在控制台查看是否有任何错误信息，这可能会提供问题的线索，比如安全策略阻止了内容的加载等。

综上所述，建议首先尝试使用iframe加载PDF，并关注是否有跨域问题，同时监控控制台输出以发现潜在错误。希望这些建议能帮助你解决问题。