Blazor项目中TelerikUpload附件无法在新标签页打开问题求助

问题描述 #

我在Blazor项目中集成了TelerikUpload组件，上传功能运行正常。当前代码会将文件下载至下载文件夹，需手动点击打开；但我希望文件能直接在新标签页或弹窗中打开而非下载，尝试多种方案均无效，请问是否因为Blazor是单页应用导致的？

当前代码 #

Razor 文件（HTML + JS） #

<a href="" @onclick="() => AttachmentOpen(item)" @onclick:preventDefault target="_blank">fileName</a>

<script>
function openFile(filename, content, mimeType) {
    var blob = new Blob([content], { type: mimeType });
    var url = window.URL.createObjectURL(blob);
    var anchorElement = document.createElement('a');
    document.body.appendChild(anchorElement);    
    anchorElement.setAttribute("type", "hidden");
    anchorElement.href = url;
    anchorElement.target = "_blank";
    anchorElement.click();

    anchorElement.remove();
    window.URL.revokeObjectURL(url);
}
</script>

Razor.cs 文件 #

private async Task AttachmentOpen(Attachment attachment)
{
    var extension = Path.GetExtension(attachment.fileName);
    var mimeType = MimeTypeHelper.GetMimeType(extension);
    byte[] DownloadFileBytes = ReadFile(attachment.Path);
    await JSRuntime.InvokeVoidAsync("openFile", attachment.fileName, FileBytes, mimeType);
}

问题分析与修复 #

这不是Blazor单页应用的特性导致的问题，你的代码存在几个关键问题需要修正：

1. 变量名不一致：C#代码中读取文件到DownloadFileBytes变量，但调用JS方法时传的是FileBytes，这会导致传递错误数据，JS无法生成正确的Blob。
2. MIME类型与浏览器解析：如果返回的MIME类型浏览器无法识别，会自动触发下载，需确保类型准确。
3. 弹出逻辑优化：创建<a>标签的方式可以简化，直接用window.open更高效。

修正后的代码 #

修正后的Razor.cs 文件

private async Task AttachmentOpen(Attachment attachment)
{
    var extension = Path.GetExtension(attachment.fileName);
    var mimeType = MimeTypeHelper.GetMimeType(extension);
    // 修正变量名，保持传递参数一致
    byte[] fileBytes = ReadFile(attachment.Path);
    await JSRuntime.InvokeVoidAsync("openFile", attachment.fileName, fileBytes, mimeType);
}

优化后的JS函数

function openFile(filename, content, mimeType) {
    // 基于Blazor传递的字节数组创建Blob
    const blob = new Blob([content], { type: mimeType });
    const url = window.URL.createObjectURL(blob);
    
    // 直接打开新标签页加载文件
    window.open(url, '_blank');
    
    // 延迟释放URL，确保浏览器已完成文件加载
    setTimeout(() => {
        window.URL.revokeObjectURL(url);
    }, 1000);
}

额外注意事项 #

• MIME类型准确性：确认MimeTypeHelper.GetMimeType返回的类型正确，比如PDF对应application/pdf、PNG图片对应image/png，错误的类型会导致浏览器触发下载。
• 浏览器弹窗限制：确保文件打开操作由用户主动点击触发（你的代码中用<a>标签的点击事件触发，符合浏览器的安全规则），避免被浏览器拦截。
• 大文件场景：如果文件体积过大，建议通过后端API直接返回文件流，前端用<a href="api/file/xxx" target="_blank">的方式打开，减少前端内存占用。

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