React.js加载C#接口返回PDF表单仅显示输入域内容问题咨询

问题原因 #

导致该问题的核心原因有两个，优先级从高到低：

• 前端请求未指定二进制响应类型：你的HTTP请求工具（agent）默认会将响应内容解析为UTF-8文本格式，而PDF属于二进制文件，转文本的过程中会损坏背景、静态文字、样式等非文本类二进制数据，只有你填充的表单字段文本刚好未被转码损坏，因此可以正常显示。
• PDF动态表单的阅读器兼容问题：你使用的是带可编辑字段的动态PDF表单，浏览器内置PDF阅读器对动态表单的渲染支持度远低于桌面端PDF阅读器，因此会出现静态内容丢失的情况。

修复方案 #

前端修复（必做） #

在你的agent.Deliverings.printDelivering请求配置中添加responseType: 'blob'参数，强制请求工具直接返回二进制Blob数据，不做文本转码。
如果你的agent是基于axios封装的，对应请求的示例代码如下：

const printDelivering = (id) => {
  return axios.get(`/你的接口路径/${id}/print`, {
    responseType: 'blob' // 关键配置
  })
}

修改后你的原有Blob生成逻辑不需要调整，即可拿到完整的二进制PDF数据。

后端修复（可选，提升兼容性） #

1. 增加响应头配置，避免部分浏览器对PDF的识别异常：

[HttpGet("{id}/print")]
public async Task<IActionResult> PrintDelivering (Guid id)
{
    var result = await Mediator.Send(new PrintDelivering.Query { Id = id });
    var document = result.Value;

    var stream = new MemoryStream();
    document.Save(stream, false);
    
    // 新增响应头，inline表示直接在浏览器中打开，改为attachment则会触发直接下载
    Response.Headers.Add("Content-Disposition", "inline; filename=delivering.pdf");
    return new FileContentResult(stream.ToArray(), "application/pdf");
}

2. 如果你不需要用户后续编辑PDF表单，可将动态表单扁平化（将表单字段合并为静态内容），彻底解决不同阅读器的兼容问题。PDFSharp的扁平化处理逻辑可参考：

// 在document.Save之前执行
if (document.AcroForm != null)
{
    document.AcroForm.Flatten();
}

内容的提问来源于stack exchange，提问作者César Cigarroa