UI5+Angular中如何阻止mime_type为application的文件点击后自动下载？

现有组件代码（Angular） #

<ui5-list
    growing="Scroll"
    class="h-full list-border-bottom"
    mode="Single"
    (ui5ItemClick)="selectFile($event)">
    <ui5-upload-collection-item
        *ngFor="let file of files"
        [fileName]="file.name"
        [title]="file.file_name"
        [id]="file?.id"
        [hideDeleteButton]="true"
        [selected]="file?.id === selectedFile?.id"
        (detailClick)="selectFile(file)"
        upload-state="Complete">
            {{ fileSize + ': ' + (file['size'] | fileSize) }}
        <img [src]="'./assets/icons/file-icons/' + (file.checkFileType() ?? 'unidentified') + '.svg'" height="46" slot="thumbnail">
    </ui5-upload-collection-item>
</ui5-list>

selectFile(event: any) {
    const id = event.item.id;
    this.selectedFile = this.files.find((file: any) => file.id == id);
}

问题现象 #

用上面的UI5组件时，点击触发selectFile后，大部分文件能正常查看，但MIME类型以application/开头的文件（比如.zip）会自动触发下载，我想统一所有文件的点击行为，不让这类文件自动下载。

已尝试的无效操作 #

• 调用preventDefault()阻止默认行为
• 添加判断逻辑提前返回：

if (this.selectedFile.mime_type?.startsWith('application/')) {
    return;
}

解决方案 #

1. 正确阻止组件的默认事件 #

问题根源是ui5-upload-collection-item对特定MIME类型的文件有内置的下载触发逻辑，你需要在事件触发时直接阻止原生事件的默认行为，而不是只处理业务逻辑。

修改selectFile方法，区分两种传入参数（ui5ItemClick传的是事件对象，detailClick传的是文件对象）：

selectFile(eventOrFile: any) {
    // 处理事件对象，先阻止默认行为
    if (eventOrFile instanceof Event) {
        eventOrFile.preventDefault();
        eventOrFile.stopPropagation();
        const id = eventOrFile.item.id;
        this.selectedFile = this.files.find(file => file.id === id);
    } else {
        // 处理detailClick传来的文件对象
        this.selectedFile = eventOrFile;
    }
}

2. 禁用UI5上传项的默认下载逻辑 #

如果上面的方法没用，可以直接移除fileName属性——这个属性是UI5用来触发内置下载逻辑的关键，改用自定义方式展示文件名：

修改HTML部分：

<ui5-upload-collection-item
    *ngFor="let file of files"
    <!-- 移除fileName属性 -->
    [title]="file.file_name"
    [id]="file?.id"
    [hideDeleteButton]="true"
    [selected]="file?.id === selectedFile?.id"
    (detailClick)="selectFile(file)"
    upload-state="Complete">
        <!-- 自定义展示文件名和大小 -->
        <div>{{ file.file_name }}</div>
        <div>{{ fileSize + ': ' + (file['size'] | fileSize) }}</div>
        <img [src]="'./assets/icons/file-icons/' + (file.checkFileType() ?? 'unidentified') + '.svg'" height="46" slot="thumbnail">
</ui5-upload-collection-item>

3. 检查文件查看逻辑的触发点 #

确认你在selectedFile变更后展示文件的逻辑，有没有对application/类型文件错误执行下载操作。比如如果是通过创建<a>标签触发点击来展示文件，要对这类MIME类型做特殊处理（比如用在线预览组件，或者提示用户无法预览），而不是直接触发下载。

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