將HTML表單輸入轉換為PDF-如何列印2個以上的輸出-有解無憂

我是編碼新手，并試圖完成將輸入資料從表單傳遞到 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>

uj5u.com熱心網友回復：

對于您的情況，應用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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/462039.html

標籤：javascript php html jQuery pdf

上一篇：GoogleApps腳本-將所有作業表單獨匯出為PDF

下一篇：有沒有辦法將Pdf放在Swal模態中？