Get weird syntax when opening automatically created pdf php javascript

Question

I'm trying to make a website where users can make a pdf. I want to show the pdf directly next to the button when I press "create worksheet". I tried to do it with javascript and php, but I get a weird syntax in my iframe instead of the actual pdf. Does anybody know the correct way of doing this?

<?php    
    $titel = "TITLE";
      require_once('tcpdf/tcpdf.php');  
      $obj_pdf = new TCPDF('P', PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);  
      $obj_pdf->SetCreator(PDF_CREATOR);  
      $obj_pdf->SetTitle("educationworksheet.com");  
      $obj_pdf->SetHeaderData('', '', PDF_HEADER_TITLE, PDF_HEADER_STRING);  
      $obj_pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));  
      $obj_pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));  
      $obj_pdf->SetDefaultMonospacedFont('helvetica');  
      $obj_pdf->SetFooterMargin(PDF_MARGIN_FOOTER);  
      $obj_pdf->SetMargins(PDF_MARGIN_LEFT, '5', PDF_MARGIN_RIGHT);  
      $obj_pdf->setPrintHeader(false);  
      $obj_pdf->setPrintFooter(false);  
      $obj_pdf->SetAutoPageBreak(TRUE, 10);  
      $obj_pdf->SetFont('helvetica', '', 12);  
      $obj_pdf->AddPage();  
      $content .= '  
      <h3 align="center">TITLE</h3><br /><br />
      <h4 align="left">This is what we are gonne do '.$titel.'</h4><br /><br /><h4 align = "left">Name:____________________________</h4>
      ';      
      $obj_pdf->writeHTML($content); 
      $obj_pdf->Output('sample.pdf', 'I');  
?>

<!DOCTYPE html>  
<html>  
    <head> 
        <script>
            function loadDoc() {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                      document.getElementById("pdf_viewer").srcdoc = this.responseText;
                    }
                };
                xhttp.open("GET", "/test2.php", true);
                xhttp.send();
            }
        </script>
      </head>  
      <body>                 
        <button height="10px" width="30px" onclick="loadDoc()" name="create_pdf" value="create worksheet">create worksheet</button>                 
        <iframe id="pdf_viewer"></iframe>
      </body>  
 </html>

Possible Duplicate [how to generate and display tcpdf on loaded page](https://stackoverflow.com/questions/45240807/how-to-generate-and-display-tcpdf-pdf-on-a-page-that-has-already-loaded) — jibsteroos, Oct 11 '19 at 21:07
It is not a duplicate, I want ik by button click, and not on page load. It is not possible to do it the way he did it. — Martijn, Oct 11 '19 at 21:36

EPB · Accepted Answer · 2019-10-13T20:25:12.147

Firstly, the issue is the browser will not interpret the PDF data as a PDF in that way. srcdoc is treated as raw HTML.

There are a couple of different ways to accomplish your "generate on click" functionality:

1) You could just drop the AJAX entirely and just use HTML form markup to accomplish this. Using the target attribute on the form element to target your PDF viewer iframe.

  <body>
    <!-- Set up our form to target the PDF viewer iframe.-->
    <!-- Note: This will work with both GET and POST methods -->
    <form action="/test2.php" method="get" target="pdf_viewer">
      <input type="text" name="titel">
      <button height="10px" width="30px" type="submit" name="create_pdf_btn" value="create worksheet">create worksheet</button>
    </form>
    <!-- Initially, frame is blank, will update to PDF generation URL on form submit. 
  I created a special empty HTML file for this purpose. -->
    <iframe name="pdf_viewer" id="pdf_viewer" src="blank.html"></iframe>
  </body>

and then in test2.php you simply generate your PDF inline as you already are.

2) Generate the file on your server and use the AJAX response to pass where the saved PDF is. This answer below opens a new window with window.open but you can simply replace that window.open line with one that updates document.getElementById('pdf_viewer').src with the new URL.

https://stackoverflow.com/a/46529459/395384

3) Return Base64 and use a lengthy data URL. For an example of that, see here:

https://stackoverflow.com/a/35197585/395384

Get weird syntax when opening automatically created pdf php javascript

1 Answers1