Question

我想创建一个可以上传HTML文件的SAPUI5应用程序。应在下一步中读取文件的内容。在标题标记之后，将在内容中插入另外的文本，并且新文件将可供下载。为了更清楚：

上传现有的HTML文件
使用其他文字编辑HTML文件
使编辑后的HTML文件可供下载

有什么想法吗？

Answer 1

使用纯UI5进行此操作相当容易，无需使用类似WebIDE的内容。

您需要特别使用三个类：

sap.ui.unified.FileUploader：用于上传文件的控件。
sap.ui.codeeditor.CodeEditor：用于显示和编辑代码的控件（具有语法高亮显示）。
sap.ui.core.util.File：用于下载内容的实用程序类。

假设您不想进行后端往返阅读文件，您还可以使用FileReader API。

所以这些是你需要做的步骤：

在视图中添加文件上传器：

<u:FileUploader change="onChangeFile" />

在控制器中创建一个处理程序以读取文件：

onChangeFile: function(oEvent) {
    var oModel = this.getView().getModel();
    var oReader = new FileReader();
    oReader.onload = function() {
        oModel.setProperty("/code", oReader.result);
    }
    oReader.readAsText(oEvent.getParameter("files")[0]);
},

添加代码编辑器控件和下载按钮：

<Button text="Download" press="onDownload" />
<ce:CodeEditor type="html" value="{/code}" height="300px" />

创建一个执行下载的处理程序：

onDownload: function() {
    var sText = this.getView().getModel().getProperty("/code");
    File.save(sText, "download", "html");
}

你可以在这里找到一个工作小提琴：https://jsfiddle.net/5z7deeyd/1/。

稍后编辑：

如果您只需要在没有用户交互的情况下更改文件，那么您只需要执行步骤1和2.对于步骤2，处理程序可能如下所示：

onChangeFile: function(oEvent) {
    var oModel = this.getView().getModel();
    var oReader = new FileReader();
    oReader.onload = function() {
        // do something with the oReader.result...
        var sNewContent = oReader.result + "something";
        File.save(sNewContent, "download", "html");
    }
    oReader.readAsText(oEvent.getParameter("files")[0]);
}

在SAPUI5应用程序

1 个答案: