使用ajax显示为随机字符串的PDF生成？

Sorry for my rookie-ness, but that's what I am. Anyway, I'm trying to make a code that flows like this:

1. User makes a query from a database
2. The results are displayed in a modal window (with the jQuery UI)
3. There is an option to view this as PDF in the modal window
4. Ajax will take the html and send it to pdfajax.php to create the PDF with TCPDF
5. Ajax will return the PDF result

I tried my take on it but I'm stumbling possibly on steps 3 to 5. All I know for sure is I can pass the html code I need with Ajax, and if I don't try to print it as a PDF but instead just echo it as PHP, it works. So I seem to be stuck only on step 5.

For experimentation, I'm just trying to display a simple PDF saying "Hey" without even passing in the variables (I commented it out for now).

The result is ugly:

I'm thinking I'm missing the use of a function here that will clean the data up before passing it through Ajax? But what is this function? Or does it exist at all and this is all just a pointless effort?

Here's the HTML:

    <div class="dialog-form" title="Query Dialog">
        <br />
        <div id="query_result"></div>
        <br />
    </div>

And the jQuery

$(".dialog-form").dialog({
    autoOpen: false,
    modal: true,
    draggable: true,
    resizable: true,
    width: 500,
    height: "auto",
    dialogClass: "no-close",
    buttons: {
        "PDF": function(){
            var html = $('#query_result').html();

            $.post('pdfajax.php',
                {
                    html: $('#query_result').html()
                },
                function( data ){
                    $('#query_result').replaceWith( data );
                }
            );

            //alert(html);
        },
        "Close": function() {
            $(this).dialog("close");
        }
    }
});

$(".minisubmit").click(function() {
    $( ".dialog-form" ).dialog( "open" );
});

And the PHP in pdfajax.php

<?php

//$htmlp = $_POST['html'];

//echo '<iframe id="query_result" srcdoc="',$htmlp,'" seamless="true"></iframe>';


require_once 'tcpdf/tcpdf.php';

$method = $_SERVER['REQUEST_METHOD'];

if(strtolower($method) == 'post'){

$pdf = new TCPDF();
$pdf->AddPage();

$html = <<<EOD
Hey
EOD;

$pdf->writeHTMLCell(0, 0, '', '', $html, 0, 1, 0, true, '', true);
$pdf->Output('example_001.pdf', 'I');

}

?>

EDIT:

I tried to use an iframe right inside the html, but it's not working. Nothing happens now after I click the PDF button.

The HTML is really simply updated.

<div class="dialog-form" title="Query Dialog">
    <br />
    <div id="query_result"></div>
    <iframe src="pdfajax.php" id="report_result"></iframe>
    <br />
</div>

The jQuery is now:

    $(".dialog-form").dialog({
    autoOpen: false,
    modal: true,
    draggable: true,
    resizable: true,
    width: 500,
    height: "auto",
    dialogClass: "no-close",
    buttons: {
        "PDF": function(){
            var html = $('#query_result').html();

            $.post('pdfajax.php',
                {
                    html: $('#query_result').html()
                },
                function( data ){
                    //$('#report_result').( data );
                    $('#report_result').prop('src', 'pdfajax.php');
                }
            );

            //alert(html);
        },
        "Close": function() {
            $(this).dialog("close");
        }
    }
});

And no change for the ajax file. I need a hint on how to proceed? I have no idea how to manipulate the iframe tag at all, and the internet tutorials don't seem to help me understand.