javascript - 如何在表单提交时使用 AJAX 显示使用 FPDF/FPDI 创建的动态生成的 PDF

Question

我正在创建一个页面，用户可以在其中自定义 PDF，在生成 PDF 后，我想显示生成的 PDF 的预览并允许用户下载或打印它。我的 PHP 可以正常工作以生成 PDF，现在我将继续使用 AJAX 调用来接受动态生成文本的表单输入。提交时，我希望 PDF 显示在 div 中，以便用户可以在打印/保存之前预览 PDF。

generate_pdf.php这是我用于 PDF 生成的 PHP( )：

<?php

use setasign\Fpdi\Fpdi;

require_once('fpdf.php');
require_once('autoload.php');

// initiate FPDI
$pdf = new Fpdi();
// add a page
$pdf->AddPage();
// set the source file
$pdf->setSourceFile('template.pdf');
// import page 1
$tplIdx = $pdf->importPage(1);
$size = $pdf->getTemplateSize($tplIdx);
$orientation = $size['width'] > $size['height'] ? 'L' : 'P';
$mid_x = $size['width']/2;

$company = $_POST['company'];
$pdf->useTemplate($tplIdx, null, null, $size['width'], $size['height'],FALSE);

// now write some text above the imported page
$pdf->SetFont('Helvetica');
$pdf->SetTextColor(0, 0, 0);
$pdf->SetXY($mid_x - ($pdf->GetStringWidth($company) / 2), 110);
$pdf->Write(0, $company);

$pdf->Output();

这是我用于 AJAX 调用的 HTML/JavaScript：

<form method="post">
    <input name="company" type="text" />
    <input type="submit" />
</form>

<div id="pdf"></div>

<script>
    var $form = $('form'),
        form_data;

    $form.submit(function(e) {
        e.preventDefault();
        form_data = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: 'generate_pdf.php',
            data: form_data
        }).done(function(response) {
            $('#pdf').append(response);
        });
    });
</script>

不幸的是，这只会产生一堆乱码，我假设它与content-type标题有关？

标签： javascriptphppdffpdf