将用户修改后的PDF保存至Blob的技术实现问题

你的核心问题在于：用户通过<embed>标签对PDF做的修改仅存在于浏览器本地内存中，并不会自动同步到服务器。你当前的C#代码是直接请求服务器上的原始PDF文件，自然拿不到用户修改后的内容。

要实现保存修改后的PDF，需要分前端和后端配合处理：

1. 前端替换原生<embed>，使用支持编辑与导出的PDF库 #

原生<embed>没有提供获取修改后PDF数据的API，必须使用具备编辑能力的PDF处理库（比如pdf.js生态下的编辑组件，或专门的PDF编辑器库）。以下是简化的前端处理逻辑：

// 示例：使用支持编辑的PDF库（需替换为实际使用的库的API）
async function saveModifiedPdf() {
    // 从编辑器实例中导出修改后的PDF为Blob
    const modifiedPdfBlob = await pdfEditor.exportAsBlob();
    
    // 构造FormData用于发送到后端
    const formData = new FormData();
    formData.append('modifiedPdf', modifiedPdfBlob, 'modified_dnd_char_sheet.pdf');
    
    // 发送POST请求到后端保存接口
    const response = await fetch('/api/save-modified-pdf', {
        method: 'POST',
        body: formData
    });
    
    if (response.ok) {
        console.log('修改后的PDF已成功保存');
    } else {
        console.error('保存失败');
    }
}

2. 后端C#接口接收并保存Blob #

替换你原有的Save方法，改为接收前端上传的修改后文件：

[HttpPost("api/save-modified-pdf")]
public async Task<IActionResult> SaveModifiedPdf(IFormFile modifiedPdf)
{
    if (modifiedPdf == null || modifiedPdf.Length == 0)
    {
        return BadRequest("未接收到修改后的PDF文件");
    }

    string savePath = @"C:\path\to\save\modified_dnd_char_sheet.pdf";

    try
    {
        using (var fileStream = new FileStream(savePath, FileMode.Create))
        {
            await modifiedPdf.CopyToAsync(fileStream);
        }
        return Ok("PDF保存成功");
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"保存过程中出现错误: {ex.Message}");
    }
}

关键说明 #

• 不要依赖原生<embed>处理可编辑PDF：它仅用于展示，无法获取用户修改后的内容。
• 前后端配合是必须的：修改后的内容在浏览器端生成Blob，再通过HTTP请求上传到服务器，后端才能获取并保存。

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