jsPDFInvoiceTemplate生成Blob失败：无法传PDF至Laravel控制器存库

修正后的前端代码 #

function generatePDF() {
    var pdfObject = jsPDFInvoiceTemplate.default(props);
    // 正确获取Blob格式的PDF数据
    var blob = pdfObject.output('blob');
    var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    var formData = new FormData();
    // 添加文件名参数，方便后端识别文件类型
    formData.append('pdfData', blob, 'invoice.pdf');

    $.ajax({
        url: '/save-pdf',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        headers: {
            'X-CSRF-TOKEN': csrfToken
        },
        success: function(response) {
            console.log('PDF saved successfully. PDF ID:', response.pdfId);
        },
        error: function(xhr, status, error) {
            console.error('Error saving PDF:', error);
        }
    });
    console.log(blob);
}

错误原因解析 #

原代码中pdfObject.OutputType(blob)是错误的调用方式，导致无法生成Blob：

1. jsPDF（包括jsPDFInvoiceTemplate返回的实例）的输出方法是小写的output()，而非OutputType；
2. 生成Blob需要传入字符串参数'blob'，原代码传入的是未定义的变量blob，导致参数无效，无法生成正确的Blob数据。

Laravel后端处理示例 #

如果需要将PDF存储到服务器并记录到数据库，控制器可以这样处理：

use Illuminate\Http\Request;
use App\Models\Pdf; // 假设你有对应的PDF模型

public function savePdf(Request $request)
{
    if (!$request->hasFile('pdfData')) {
        return response()->json(['error' => '未接收到PDF文件'], 400);
    }

    $pdfFile = $request->file('pdfData');
    // 存储到storage/app/public/pdf目录，生成唯一文件名
    $filePath = $pdfFile->storeAs('pdf', uniqid() . '.pdf', 'public');

    // 将文件路径保存到数据库
    $pdfRecord = Pdf::create([
        'file_path' => $filePath,
        // 可添加其他字段，比如文件名、创建时间等
    ]);

    return response()->json(['pdfId' => $pdfRecord->id]);
}

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