如何通过Ajax将jsPDF生成的文件与模型一同发送至控制器？

核心问题说明 #

你之前的写法错误在于用表单序列化（urlencoded格式）和Blob直接拼接，这种方式无法正确传递文件数据。正确的做法是使用FormData对象，它专门用于处理包含文件的表单数据，能同时兼容普通模型字段和文件上传。

前端实现步骤与代码 #

1. 生成jsPDF的Blob对象
2. 创建FormData，添加模型字段和PDF文件
3. 配置Ajax请求（关键是禁用自动处理数据和Content-Type）

// 1. 生成jsPDF并导出为Blob
const doc = new jsPDF();
doc.text("报表内容示例", 15, 15);
const pdfBlob = doc.output('blob'); // 生成PDF的Blob对象

// 2. 构建FormData，同时添加模型数据和PDF文件
const formData = new FormData();
// 遍历表单元素，把模型字段加入FormData（假设表单id为reportForm）
$("#reportForm").serializeArray().forEach(item => {
    formData.append(item.name, item.value);
});
// 添加PDF文件，注意键名要和后端模型的IFormFile属性名完全一致
formData.append("ReportPdf", pdfBlob, "generated-report.pdf");

// 3. 发送Ajax请求
$.ajax({
    url: "/YourController/EditReport",
    method: "POST",
    data: formData,
    contentType: false, // 必须设为false，让浏览器自动设置multipart/form-data边界
    processData: false, // 必须设为false，禁止jQuery处理FormData格式
    success: function(res) {
        console.log("提交成功:", res);
        // 后续逻辑，比如页面跳转或提示
    },
    error: function(xhr) {
        console.error("提交失败:", xhr.responseText);
    }
});

后端实现步骤与代码 #

1. 调整模型，添加IFormFile类型的属性（对应前端的PDF文件）
2. 编写控制器Action，接收模型参数

模型定义 #

public class PartialReportModel
{
    // 你的原有模型字段，示例：
    public int ReportId { get; set; }
    public string ReportTitle { get; set; }
    public DateTime ReportDate { get; set; }

    // 对应前端传递的PDF文件，键名必须和FormData中的一致
    public IFormFile ReportPdf { get; set; }
}

控制器Action #

public class YourController : Controller
{
    [HttpPost]
    public IActionResult EditReport(PartialReportModel model)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        // 处理模型数据
        var reportId = model.ReportId;
        var reportTitle = model.ReportTitle;

        // 处理PDF文件
        if (model.ReportPdf != null && model.ReportPdf.Length > 0)
        {
            // 示例：读取PDF字节流
            using var memoryStream = new MemoryStream();
            model.ReportPdf.CopyTo(memoryStream);
            byte[] pdfBytes = memoryStream.ToArray();
            
            // 后续逻辑：保存到服务器、存储到数据库等
        }

        return Ok("报表更新成功");
    }
}

关键注意事项 #

• 前端FormData的键名必须和后端模型的属性名完全匹配（大小写不敏感，但建议保持一致）
• 必须设置contentType: false和processData: false，否则jQuery会破坏FormData的格式，导致文件无法识别
• 可以在浏览器开发者工具的Network面板中查看请求，确认FormData是否包含了文件和所有模型字段

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