Blazor Server中Base64转Uint8Array报错及大文件高效处理咨询

问题根源分析 #

1. Base64转Uint8Array效率低：自定义的base64DecToArr函数未利用浏览器原生API的优化能力，处理大文件时会出现明显性能瓶颈。
2. 弹窗拦截导致null错误：无参数调用window.open()极易触发浏览器弹窗拦截机制，返回null后访问tab.location自然抛出属性读取错误。

优化方案 #

1. 高效转换Base64为二进制

直接使用浏览器原生atob()配合Uint8Array构造，比自定义转换函数效率提升显著；同时无需创建File对象，用Blob即可满足URL生成需求（Blob是File的父类，功能完全覆盖此处场景）。

2. 规避弹窗拦截

将生成的文件URL直接作为window.open()的参数，而非先打开空标签再赋值，这种方式更符合浏览器的合法跳转判定逻辑，大幅降低被拦截概率。

优化后的代码 #

function BlazorOpenFile(filename, contentType, content) {
    // 原生API高效转换Base64为Uint8Array
    const binaryStr = atob(content);
    const len = binaryStr.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i);
    }

    // 直接创建Blob，减少不必要的对象封装
    const blob = new Blob([bytes], { type: contentType });
    const exportUrl = URL.createObjectURL(blob);

    // 直接传入URL打开标签，避免弹窗拦截与null错误
    const tab = window.open(exportUrl);
    // 可选：设置新标签页标题为文件名
    if (tab) {
        tab.document.title = filename;
    }

    // 及时释放URL对象，避免内存泄漏
    setTimeout(() => {
        URL.revokeObjectURL(exportUrl);
    }, 1000);
}

额外优化：直接下载PDF（无弹窗） #

如果需求是下载而非打开PDF，可通过创建a标签模拟点击的方式，完全规避弹窗问题：

function BlazorDownloadFile(filename, contentType, content) {
    const binaryStr = atob(content);
    const len = binaryStr.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i);
    }

    const blob = new Blob([bytes], { type: contentType });
    const exportUrl = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = exportUrl;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    URL.revokeObjectURL(exportUrl);
}

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