如何用JavaScript在网页中稳定显示PDF文件

一、优先修复低级错误：MIME类型拼写错误 #

你的JavaScript代码中data URI的MIME类型拼写错误：applicaton/pdf → application/pdf，这个错误会导致部分浏览器/PDF解析器无法识别资源类型，直接显示空白。修改后代码：

pdfWindow.document.write(`<iframe width='100%' height='100%' src='data:application/pdf;base64, ${encodeURI(exam)}'></iframe>`)

二、解决大文件URI过长问题：改用Blob + Object URL #

base64编码会使文件体积增大30%左右，大文件容易触发浏览器的URI长度限制，导致加载失败但无报错。改用Blob创建临时URL的方式，既保留原生PDF交互性，又避免长度限制：

前端JavaScript修改： #

// 替换原postData请求，直接用fetch获取字节流
const response = await fetch(API_URL + 'GetDocument/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data) // data包含GUID
});

if (!response.ok) {
    throw new Error('获取PDF失败');
}

// 将响应转为Blob，创建临时URL
const pdfBlob = await response.blob();
const pdfObjectUrl = URL.createObjectURL(pdfBlob);

// 打开新窗口显示PDF
const pdfWindow = window.open("");
pdfWindow.document.write(`<iframe width='100%' height='100%' src='${pdfObjectUrl}' frameborder='0'></iframe>`);

// 窗口关闭时释放临时URL，避免内存泄漏
pdfWindow.addEventListener('unload', () => {
    URL.revokeObjectURL(pdfObjectUrl);
});

后端API修改（C#）： #

将原返回base64字符串的逻辑改为直接返回PDF字节流，设置正确的响应头：

[HttpPost("GetDocument")]
public IActionResult GetDocument([FromBody] GuidRequest request) // 定义GuidRequest类接收GUID参数
{
    // 从SQL Server查询VARBINARY(MAX)字段获取字节数组
    byte[] pdfData = _dbContext.Documents
        .Where(d => d.Id == request.DocumentGuid)
        .Select(d => d.FileContent)
        .FirstOrDefault();

    if (pdfData == null)
    {
        return NotFound("未找到指定文档");
    }

    // 返回PDF文件流，设置正确的Content-Type
    return File(pdfData, "application/pdf");
}

三、排查上传环节的文件完整性问题 #

部分PDF显示空白可能是上传时未完整读取文件字节：
你的原C#上传代码用(int)stream.Length转换长度，若文件大小超过int的最大值（2GB）会导致溢出，读取不完整。修改为更安全的读取方式：

byte[] file;
using (var stream = new FileStream(DocumentTextBox.Text, FileMode.Open, FileAccess.Read))
using (var memoryStream = new MemoryStream())
{
    stream.CopyTo(memoryStream);
    file = memoryStream.ToArray();
}

同时验证数据库中存储的字节数组长度与原文件大小是否一致，确认没有存储截断。

四、补充验证：检查PDF文件本身 #

部分空白情况可能是PDF文件本身损坏（比如上传前就有问题），可以将数据库中导出的字节数组保存为本地PDF，验证是否能正常打开。

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