return dompdf output as json data to be viewed using jquery dialog

[Steve Johnson]

I have a hidden div that i populate with html. use jquery call to gather html and the populate the hidden div and open with the jquery dialog function. everything work great. now i want to return the same html formated as a pdf

I an using symfony 2


on my page with a button to view html form

<div id="display_dialog"></div>

json code used to populate the dialog

$.ajax({
  type: "GET",
  dataType: 'json',
  url: _path,
  success: function (msg) {
    $( "#display_dialog").html(msg.form);
    $( "#display_dialog" ).dialog({
      width: $( window).width() - 200,
      height: $( window).height() - 200,
      modal: true,
      close: function( event, ui ) {
        $( "#display_dialog").html("");
      }});},
});


current code that returns html and works fine (not formatted as pdf)

public function templateAction($uu_code)
{
  $html = $this->renderView('MainBundle:Display:template.html.twig');

  return new JsonResponse(array('form'=>$html));
}


this code opens a new page as a pdf and works fine, not embedded in the dialog 


  public function templatePdfAction($uu_code)
  {
    $html = $this->renderView('MainBundle:Display:template.html.twig');

    $pdf = new cxDomPdf();
    $pdf->load_html($html);
    $pdf->render();

    $pdf->stream('my.pdf', array("Attachment" => 0));
  }


now i want to use the first function to format the html as a pdf


this is my DOMPDF class object


class cxDomPdf extends \DOMPDF
{
}


thanks!

[BrianS]

It's a bit more difficult to insert binary data into a div. Have you considered placing an iframe in the div and pointing to the PDF rendering URL?

If you really want to receive the PDF as a response and append to the document you could try to base64 encode it and set the source of an iframe or object element to a data-uri.

This is all untested, so you may need to tweak it a bit to get things working. First return the PDF as a base64-encoded string, maybe something like this:

public function templatePdfAction($uu_code)
 {
  $html = $this->renderView('MainBundle:Display:template.html.twig');

  $pdf = new cxDomPdf();
  $pdf->load_html($html);
  $pdf->render();

  echo base64_encode($pdf->output());
 }

Then insert the content into the document:

$.ajax({
  type: "GET",
  dataType: 'text',
  url: _path,
  success: function (pdf) {
    var modalWidth = $(window).width() - 200;
    var modalHeight = $(window).height() - 200
    var iframeWidth = modalWidth - 20;
    var iframeHeight = modalHeight - 20;
    $( "#display_dialog").html('<iframe width="' + iframeWidth + '" height="' + iframeHeight + '" src="data:application/pdf;base64,' + pdf + '"></object>');
    $( "#display_dialog" ).dialog({
      width: modalWidth,
      height: modalHeight,

      modal: true,
      close: function( event, ui ) {
        $( "#display_dialog").html("");
      }
    });
  },
});

If you're going to use an object/embed then there's a caveat: not all browsers will display the PDF in the same way. I haven't tested this in a while but I know that some browsers in the past would only display the first page.