打开自动创建的 pdf 时出现奇怪的语法 php javascript

Question

我正在尝试制作一个用户可以制作 pdf 的网站。我想在按下 "create worksheet" 时直接在按钮旁边显示 pdf。我试着用 javascript 和 php 来做，但我在 iframe 中得到了一个奇怪的语法，而不是实际的 pdf。有人知道这样做的正确方法吗？

<?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>

Answer 1

首先，问题是浏览器不会以这种方式将 PDF 数据解释为 PDF。 srcdoc 被视为原始 HTML.

有几种不同的方法可以实现您的 "generate on click" 功能：

1) 您可以完全删除 AJAX 并使用 HTML 表单标记来完成此操作。使用表单元素上的 target 属性定位您的 PDF 查看器 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>

然后在 test2.php 中，您只需照原样生成内联 PDF。

2) 在您的服务器上生成文件并使用 AJAX 响应传递保存 PDF 的位置。下面的这个答案打开了一个新的 window with window.open 但你可以简单地将 window.open 行替换为用新的 [=43= 更新 document.getElementById('pdf_viewer').src 的行].

3) Return Base64 并使用长数据URL。有关示例，请参见此处：

打开自动创建的 pdf 时出现奇怪的语法 php javascript

Get weird syntax when opening automatically created pdf php javascript

javascript

php

tcpdf