OpenUI5 sap.m.PDFViewer加载PDF时抛出DOM错误求助

问题描述 #

尝试在UI5项目中通过sap.m.PDFViewer展示项目内的PDF文件，网络请求显示文件已正常加载且路径正确，但Viewer始终显示默认错误提示，控制台报错：

Error: Underlying iframe was not found in DOM.

已测试UI5版本1.108.19、1.114.8，问题未解决。

相关代码 #

XML视图片段 #

<PDFViewer
   displayType="Auto"
   source="{/fileSource}"
   <layoutData>
      <FlexItemData growFactor="1" />
   </layoutData>
</PDFViewer>

URL生成代码 #

this.sSourcePath = sap.ui.require.toUrl("com/myapp/docs/File.pdf");
this.oModel = new JSONModel({
  fileSource: this.sSourcePath
});
this.setModel(this.oModel);

解决方法 #

• 修复XML语法错误
  你的XML代码存在标签未闭合问题：<PDFViewer>标签的属性行末尾缺少闭合的>，这会导致控件无法正确初始化渲染，进而找不到内部依赖的iframe元素。修正后的代码：

  <PDFViewer
     displayType="Auto"
     source="{/fileSource}">
     <layoutData>
        <FlexItemData growFactor="1" />
     </layoutData>
  </PDFViewer>
  

• 确保控件有足够渲染空间
  若控件所在容器未分配明确的宽高，可能导致iframe无法被正确创建。可以直接给PDFViewer设置宽高属性，或确保父布局能为其分配空间：

  <PDFViewer
     displayType="Auto"
     source="{/fileSource}"
     width="100%"
     height="80vh">
     <layoutData>
        <FlexItemData growFactor="1" />
     </layoutData>
  </PDFViewer>
  

• 验证URL有效性与访问权限
  虽然网络请求显示文件加载正常，仍可直接在浏览器地址栏访问生成的URL，确认PDF能正常打开。若存在跨域问题，可将PDF文件移至项目webapp目录下，使用相对路径引用：

  this.sSourcePath = "./docs/File.pdf"; // 假设docs目录位于webapp根目录下
  

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