将 HTML 表单输入转换为 PDF - 如何打印 2 个以上的输出

Question

我不熟悉编码，并试图完成将输入数据从表单传递到 PHP 响应页面并在浏览器中显示的过程。然后用户可以单击按钮将 HTML 元素保存为 PDF。该代码在显示 2 个表单输出时有效，例如。但是一旦我从表单中添加更多输出，javascript 似乎就不会运行。我不明白出了什么问题。

HTML表单输入页面：

<!DOCTYPE html>
<html>
<body>
<img src ="ff.png">
<form action="response.php" method="post">
Invoice Number/Reference:<br>
<input type="text" name="ref"><br>
Customer Name:<br>
<input type="text" name="cname"><br>
<br>
Item:<br>
<input type="text" name="i1">
Cost
<input type="text" name="c1">
<br>
Item:<br>
<input type="text" name="i2">
Cost
<input type="text" name="c2">
<br>
Item:<br>
<input type="text" name="i3">
Cost
<input type="text" name="c3">
<br><br>
Total Cost:<br>
<input type="text" name="t1"><br><br>
<input type="submit">
</form>

</body>
</html>

PHP 带有下载为 PDF 的按钮的响应页面

<!DOCTYPE html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>
<script>
function generatePDF() {
 var doc = new jsPDF();  //create jsPDF object
  doc.fromHTML(document.getElementById("input_data"), // page element which you want to print as PDF
  15,
  15, 
  {
    'width': 170  //set width
  },
  function(a) 
   {
    doc.save("ClientInvoice.pdf"); // save file name as HTML2PDF.pdf
  });
}
</script>
</head>


  <body>
    <div id="input_data">
      <img src = "ff.png" width="150"><br>
      <h2>Invoice Reference: <?php echo $_POST["ref"]; ?></h2><br>
      Customer name: <?php echo $_POST["cname"]; ?><br><br>
      Item: <?php echo $_POST["i1"]; ?><br>
      £ <?php echo $_POST["c1"]; ?><br>
      Item: <?php echo $_POST["i2"]; ?><br>
      £ <?php echo $_POST["c2"]; ?><br>
      Item: <?php echo $_POST["i3"]; ?><br>
      £ <?php echo $_POST["c3"]; ?><br><br>
      Total: <?php echo $_POST["t1"]; ?><br><br>

      Thank you for choosing My Company.
  
    </div>
    
<a href="javascript:generatePDF()">Dowload PDF</a>
  </body>
</html>

Answer 1

对于你申请的案例 jspdf.debug.js

请用 <div> 括起您的字符串数据（因此请使用 </div>TEXT</div>）
请使用£作为井号（避免在页面上查看此字符时看到奇怪的字符）

所以请将您的代码 (response.php) 更改为：

<!DOCTYPE html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>
<script>
function generatePDF() {
 var doc = new jsPDF();  //create jsPDF object
  doc.fromHTML(document.getElementById("input_data"), // page element which you want to print as PDF
  15,
  15, 
  {
    'width': 170  //set width
  },
  function(a) 
   {
    doc.save("ClientInvoice.pdf"); // save file name as HTML2PDF.pdf
  });
}
</script>
</head>


  
  <body>
    <div id="input_data">
      <img src = "ff.png" width="150"><br>
      <h2>Invoice Reference: <?php echo $_POST["ref"]; ?></h2><br>
      <div>Customer name: <?php echo $_POST["cname"]; ?></div><br><br>
      <div>Item: <?php echo $_POST["i1"]; ?></div><br>  
      <div>&#163; <?php echo $_POST["c1"]; ?></div><br>
      <div>Item: <?php echo $_POST["i2"]; ?></div><br>
      <div>&#163; <?php echo $_POST["c2"]; ?></div><br>
      <div>Item: <?php echo $_POST["i3"]; ?></div><br>
      <div>&#163; <?php echo $_POST["c3"]; ?></div><br><br>
      <div>Total: <?php echo $_POST["t1"]; ?></div><br><br>
      <div>Thank you for choosing My Company.</div>
     </div>
    
<a href="javascript:generatePDF()">Dowload PDF</a>
  </body>
</html>

在此处查看工作版本：

http://www.createchhk.com/SOanswers/testSO17apr2022.html

将 HTML 表单输入转换为 PDF - 如何打印 2 个以上的输出

Converting HTML form input to PDF - How to print more than 2 outputs

html

javascript

php

pdf

jquery