Base64格式PDF无法在Blazor弹窗iframe中加载的问题求助

核心问题原因 #

直接使用Base64格式的data URI加载大体积PDF时，会触发两个关键问题：

• 浏览器对data URI的长度有隐性限制，大文件容易超出限制导致加载失败
• 大体积Base64字符串在Blazor与JS之间传递、DOM解析时会产生极高性能开销，引发卡顿或崩溃

解决方案1：将Base64转为Blob URL加载（推荐） #

通过把Base64解码为Blob，再生成Blob URL加载PDF，能避开data URI的长度限制，同时提升性能。

修改后的JavaScript方法 #

function openPdf(base64PdfDoc) {
    "use strict";
    // 移除可能存在的data URI前缀
    const base64Data = base64PdfDoc.replace(/^data:application\/pdf;base64,/, '');
    // 解码Base64为字节数组
    const byteCharacters = atob(base64Data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    // 创建PDF Blob对象
    const pdfBlob = new Blob([byteArray], { type: 'application/pdf' });
    // 生成临时Blob URL
    const pdfUrl = URL.createObjectURL(pdfBlob);

    const left = window.screen.width > 0 ? window.screen.width / 4 : 0;
    const pdfWindow = window.open("", 'winname', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=800,height=750,top=0,left=' + left);
    pdfWindow.document.write(`<iframe width='100%' height='100%' src='${pdfUrl}'></iframe>`);
    
    // 弹窗关闭时释放Blob URL，避免内存泄漏
    pdfWindow.addEventListener('unload', () => {
        URL.revokeObjectURL(pdfUrl);
    });
}

Blazor调用代码（无需修改） #

await JsRuntime.InvokeVoidAsync("openPdf", pdfContent);

解决方案2：直接传递字节数组给JS（更高效） #

Base64会让文件体积增加约33%，直接传递原始字节数组能减少数据传输开销，进一步提升性能。

JavaScript方法 #

function openPdfFromBytes(byteArray) {
    "use strict";
    const pdfBlob = new Blob([byteArray], { type: 'application/pdf' });
    const pdfUrl = URL.createObjectURL(pdfBlob);

    const left = window.screen.width > 0 ? window.screen.width / 4 : 0;
    const pdfWindow = window.open("", 'winname', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=800,height=750,top=0,left=' + left);
    pdfWindow.document.write(`<iframe width='100%' height='100%' src='${pdfUrl}'></iframe>`);
    
    pdfWindow.addEventListener('unload', () => {
        URL.revokeObjectURL(pdfUrl);
    });
}

Blazor调用代码（假设pdfContent是byte[]类型） #

await JsRuntime.InvokeVoidAsync("openPdfFromBytes", pdfContent);

解决方案3：服务器端生成临时URL（适合Server-Side Blazor） #

如果是服务器端Blazor，可将PDF临时保存到服务器，生成临时URL供前端加载，彻底避免大文件跨边界传输。

Blazor后台代码 #

// 假设pdfBytes是PDF的原始字节数组
var tempFileName = $"{Guid.NewGuid()}.pdf";
var tempFilePath = Path.Combine(Path.GetTempPath(), tempFileName);
File.WriteAllBytes(tempFilePath, pdfBytes);

// 生成临时访问URL（需在Program.cs中配置对应的端点）
var pdfUrl = $"/temp-pdfs/{tempFileName}";
await JsRuntime.InvokeVoidAsync("openPdfFromUrl", pdfUrl);

配置服务器端点（Program.cs） #

app.MapGet("/temp-pdfs/{fileName}", (string fileName) => {
    var filePath = Path.Combine(Path.GetTempPath(), fileName);
    if (!File.Exists(filePath)) return Results.NotFound();
    // 返回文件并设置过期头，同时可添加清理逻辑
    return Results.PhysicalFile(filePath, "application/pdf", enableRangeProcessing: true);
});

JavaScript方法 #

function openPdfFromUrl(pdfUrl) {
    "use strict";
    const left = window.screen.width > 0 ? window.screen.width / 4 : 0;
    const pdfWindow = window.open("", 'winname', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=800,height=750,top=0,left=' + left);
    pdfWindow.document.write(`<iframe width='100%' height='100%' src='${pdfUrl}'></iframe>`);
}

注意：需定时清理服务器上的临时PDF文件，避免磁盘占用过高。

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