Blazor ASP.NET CORE 3.1项目IE11环境下iframe无法加载PDF二进制流如何解决

IE11 不支持直接将PDF二进制流作为data URI赋值给iframe的src属性，同时对Blob URL的兼容性存在缺陷，原生PDF阅读器也有特殊加载要求，所以直接赋值二进制数据的方式无法生效。

你可以采用以下两种兼容方案实现需求：

方案1：后端生成临时预览接口（兼容性最高，推荐） #

• 后端新增两个接口，一个用于临时存储PDF二进制数据并返回有效时长10分钟的临时token，另一个用于根据token返回PDF流
• 前端iframe的src直接指向预览接口地址，IE11内置的PDF阅读器可以正常加载接口返回的PDF内容
• 临时token校验可以避免PDF内容泄露，过期后自动失效
• Blazor前端代码示例：

<iframe src="@_previewUrl" width="100%" height="600px" frameborder="0"></iframe>

@code {
    private string _previewUrl;

    private async Task LoadPdf(byte[] pdfBytes)
    {
        // 调用后端接口存储PDF二进制数据，获取临时token
        var token = await Http.PostAsJsonAsync("/api/pdf/saveTemp", pdfBytes).Result.Content.ReadAsStringAsync();
        _previewUrl = $"/api/pdf/preview?token={token}";
        StateHasChanged();
    }
}

• 后端接口示例（ASP.NET Core 3.1）：

// 临时存储PDF接口
[HttpPost("saveTemp")]
public async Task<IActionResult> SaveTemp([FromBody] byte[] pdfBytes)
{
    var token = Guid.NewGuid().ToString("N");
    // 内存缓存或分布式缓存存储10分钟
    _distributedCache.Set(token, pdfBytes, new DistributedCacheEntryOptions 
    { 
        AbsoluteExpirationRelativeToNow = TimeSpan.FromMinutes(10) 
    });
    return Ok(token);
}

// PDF预览接口
[HttpGet("preview")]
public async Task<IActionResult> Preview(string token)
{
    var pdfBytes = await _distributedCache.GetAsync(token);
    if (pdfBytes == null) return NotFound();
    Response.Headers.Add("Content-Disposition", "inline; filename=preview.pdf");
    return File(pdfBytes, "application/pdf");
}

方案2：使用兼容IE11的PDF.js渲染 #

• 下载2.x版本的PDF.js（3.x及以上不再支持IE11），放到项目静态资源目录
• 将iframe的src指向PDF.js的viewer.html页面，把PDF的临时接口地址作为参数传给viewer即可
• 该方案不依赖IE11内置PDF阅读器，可以统一所有浏览器的预览样式

注意事项 #

• IE11对data URI的长度限制极低，不要尝试直接用data URI加载大于2MB的文件，会直接加载失败
• 如果用户手动禁用了IE11内置PDF阅读器，会触发PDF下载而不是预览，该客户端设置无法通过代码修改

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