在SAP UI5应用中使用PDFViewer显示本地PDF文件失败求助

问题概述 #

在SAP UI5应用中尝试展示src文件夹内的本地PDF文件，但因路径配置错误导致文件无法正常加载，以下是问题相关的控制器和视图代码及修正方案。

核心问题分析 #

1. 硬编码路径不符合UI5资源规则：直接使用webapp/src/dummy.pdf这类硬编码路径，会在不同部署环境或应用结构下失效，UI5框架要求通过专用API生成资源路径。
2. 错误的路径生成方式：使用sap.ui.core.URI处理应用资源路径是不合适的，该API用于URI解析而非资源寻址；正确的方式是使用sap.ui.require.toUrl，它能根据应用命名空间生成相对当前应用的有效资源路径。

修正后的代码 #

控制器代码 #

sap.ui.define([
    "jquery.sap.global",
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function(jQuery, Controller, JSONModel) {
    "use strict";

    var PageController = Controller.extend("PdfViewTest.controller.App", {

        onInit : function () {
            // 通过sap.ui.require.toUrl生成正确的资源路径，指向src下的dummy.pdf
            this._sValidPath = sap.ui.require.toUrl("PdfViewTest/src/dummy.pdf"); 
            this._sInvalidPath = sap.ui.require.toUrl("PdfViewTest/src/sample_nonexisting.pdf");
            this._oModel = new JSONModel({
                Source: this._sValidPath,
                Title1: "My Title 1",
                Title2: "My Title 2",
                Height: "600px"
            });
            this.getView().setModel(this._oModel);
        },

        onCorrectPathClick: function() {
            this._oModel.setProperty("/Source", this._sValidPath);
        },

        onIncorrectPathClick: function() {
            this._oModel.setProperty("/Source", this._sInvalidPath);
        }
    });

    return PageController;
});

视图代码 #

将静态路径改为绑定模型中的路径，保持与动态切换逻辑一致：

<mvc:View
        controllerName="PdfViewTest.controller.App"
        displayBlock="true"
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:pdf="PdfViewTest.control">
    <App>
        <ScrollContainer
        height="100%"
        width="100%"
        horizontal="true"
        vertical="true">
        <FlexBox class="sapUiSmallMargin" direction="Column" renderType="Div">
            <FlexBox>
                <Button text="正确显示" press="onCorrectPathClick"/>
                <Button text="加载错误" press="onIncorrectPathClick"/>
            </FlexBox>
            <FlexBox direction="Row" fitContainer="true" renderType="Div">
                <!-- 绑定模型中的Source路径，确保路径一致性 -->
                <PDFViewer class="sapUiSmallMarginEnd" source="{/Source}" title="{/Title1}" height="{/Height}" width="auto">
                    <layoutData>
                        <FlexItemData growFactor="1"/>
                    </layoutData>
                </PDFViewer>
                <PDFViewer class="sapUiSmallMarginBegin" source="{/Source}" title="{/Title2}" height="{/Height}" width="auto">
                    <layoutData>
                        <FlexItemData growFactor="1"/>
                    </layoutData>
                </PDFViewer>
            </FlexBox>
            <!-- <Page title="PdfView Test">
                
                <content>
                    <pdf:PdfView id="pdfView"></pdf:PdfView>
                </content>
            </Page> -->
        </FlexBox>
        </ScrollContainer>
    </App>
</mvc:View>

验证步骤 #

• 确认PDF文件存放在应用的src目录下，文件名与代码中完全一致（注意大小写）。
• 运行应用后，打开浏览器开发者工具的控制台，检查是否存在404错误，确认路径是否被正确解析。
• 若使用注释中的自定义PdfView控件，需同样采用sap.ui.require.toUrl生成的路径加载资源。

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