Ajax发布后动作未执行

Question

I'm trying to generate a pdf file with an image and a highcharts image in it. This is what I do when I click on a button:

('#button').click(function() {
    var quizid = <?php echo json_encode($quizid); ?>;
    var chart = Highcharts.charts[0];

    canvg(document.getElementById('canvas'), chart.getSVG())

    var canvas = document.getElementById("canvas");
    var img = canvas.toDataURL("image/png");

    //document.write('<img src="'+img+'"/>');

    // AJAX CALL TO ACTION
    $.ajax({
        url: '/results/savepdf',
        type:"POST",
        data: {quizid: quizid, image: img},
        success: function(data) {
            console.log("ajax call succces");
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });

});

In my action I have:

public function savepdfAction(){
    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender();

    if(isset($_POST['quizid']))
        $quizid = $_POST['quizid'];
    if(isset($_POST['image']))
        $image = $_POST['image'];

    // SAVE THE PDF OR WORD

    // INCLUDE TCPDF LIBRARY
    require_once 'tcpdf/tcpdf.php';

    try {
        // create new PDF document
        $pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

        $pdf->SetCreator(PDF_CREATOR);
        $pdf->SetAuthor('Nicola Asuni');
        $pdf->SetTitle('TCPDF Example 009');
        $pdf->SetSubject('TCPDF Tutorial');
        $pdf->SetKeywords('TCPDF, PDF, example, test, guide');

        $pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE.' 009', PDF_HEADER_STRING);

        $pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
        $pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));

        $pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);

        $pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
        $pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
        $pdf->SetFooterMargin(PDF_MARGIN_FOOTER);

        $pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);

        $pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);

        $pdf->AddPage();

        $pdf->setJPEGQuality(75);

        $imgdata = base64_decode('iVBORw0KGgoAAAANSUhEUgAAABwAAAASCAMAAAB/2U7WAAAABlBMVEUAAAD///+l2Z/dAAAASUlEQVR4XqWQUQoAIAxC2/0vXZDrEX4IJTRkb7lobNUStXsB0jIXIAMSsQnWlsV+wULF4Avk9fLq2r8a5HSE35Q3eO2XP1A1wQkZSgETvDtKdQAAAABJRU5ErkJggg==');

        $pdf->Image('@'.$imgdata);

        $pdf->Image('/images/logo.png', 25, 40, 154, 25, 'PNG', 'http://www.surveyanyplace.com', '', true, 150, '', false, false, 1, false, false, false);

        $horizontal_alignments = array('L', 'C', 'R');
        $vertical_alignments = array('T', 'M', 'B');

        $pdf->Output('example_009.pdf', 'I');

    }
    catch (Exception $e) {
        die ('Application error: ' . $e->getMessage());
    }
}

As you can see I just want to show a pdf file without the parameters that were sent (Just to test).

This doesn't work ....

When I try this without the ajax call it works fine ...

I got this response:

TCPDF ERROR: Some data has already been output, can't send PDF file

I searched for the error and read that you have can fix this by putting ob_end_clean(); before your $pdf->Output('example_009.pdf', 'I'); . And when I did that I got another reponse that you can watch here .

Answer 1

Since a .pdf file is binary data, you shouldn't use an Ajax request. After a quick search I found this jQuery plugin:

• jQuery Plugin for Requesting Ajax-like File Downloads

It's a very small function and it generates a temporary form with hidden fields that it submits. Maybe not the most beautiful solution, but it should work. Haven't tested it though...