Blazor项目中Chromium浏览器_self打开PDF下载显示AllFiles问题求助

问题场景 #

在Blazor项目中通过JS互操作传递Blob展示PDF，Firefox中运行正常，但在Chromium系浏览器里，用_self方式打开时，PDF查看器的下载按钮会把文件识别为"AllFiles"，仅_blank方式能正确识别PDF文件名。

原因分析 #

Chromium在处理<a>标签_self跳转时，未正确传递Blob URL关联的文件名元数据，导致内置PDF查看器无法获取正确的文件名信息；而_blank方式会新建标签页，浏览器会完整解析Blob的元数据，因此能正确识别文件名。

解决方法 #

替换原来的<a>标签点击逻辑，直接使用window.open(url, '_self')加载PDF，让Chromium正确解析Blob的文件名信息：

//contentType = 'application/pdf'
async function handleFile(filename, contentType, data) {
    var sUserAg = navigator.userAgent;
    const file = new File([data], filename, { type: contentType });
    const url = URL.createObjectURL(file);
    
    // 使用window.open直接在当前页面加载PDF
    window.open(url, '_self');

    if (sUserAg.indexOf("Firefox") <= -1) {
        setTimeout(function () {
            URL.revokeObjectURL(url);
        }, 600000);
    }
    else {
        setTimeout(function () {
            URL.revokeObjectURL(url);
        }, 100);
    }
}

额外注意事项 #

• 确保传入的filename参数包含正确的.pdf后缀（例如"report.pdf"），这是浏览器识别文件类型的基础。
• 若仍有问题，可检查Blob构造时的参数完整性，但多数情况下上述修改即可解决问题。

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