在Phonegap App中下載HTML/頁面為PDF

Question

我目前正在通過Phonegap 使用HTML/CSS/JS 編寫一個移動應用程序。 我只想將當前頁面的內容保存為 PDF 文件。

我嘗試過 jsPDF 和 html2PDF，但無濟於事。 在我的 Chrome 瀏覽器中進行測試后，每個結果都只留下一個無用的可點擊按鈕。

由於我是 JavaScript 的新手，如果我錯了，請糾正我 - 為了測試代碼，我只需在瀏覽器中打開 HTML 文件，代碼應該是 ZC1C425268E68385D1AB4Z5074C17A94F? 我一直在測試在 web 上找到的以下代碼，但是在 Chrome 中進行測試時，我留下了一個空白的可點擊按鈕：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>HTML to PDF Eample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="html2pdf.bundle.min.js"></script>

    <script>
      function generatePDF() {
        // Choose the element that our invoice is rendered in.
        const element = document.getElementById("invoice");
        // Choose the element and save the PDF for our user.
        html2pdf()
          .from(element)
          .save();
      }
    </script>
  </head>
  <body>
    <button onclick="generatePDF()">Download as PDF</button>
    <div id="invoice">
      <h1>Our Invoice</h1>
    </div>
  </body>
</html>

每次我通過 Phonegap 在我的瀏覽器或手機中測試代碼時，我都會留下一個什么都不做的可點擊按鈕。 我相信我正確設置了所有內容。 我下載了 html2pdf github repo 並將 JS 文件放入我項目的 JS 文件夾中。 但我仍然不確定為什么我的按鈕不起作用。

有任何想法嗎？ 任何和所有的貢獻都將不勝感激。 此外，如果還有另一種方法可以將頁面/HTML 保存到 pdf，那也是完美的。

編輯：控制台中的錯誤：

Answer 1

添加此元

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-eval'; script-src * 'unsafe-eval' 'unsafe-eval'; img-src * data: 'unsafe-eval'; connect-src * 'unsafe-eval'; frame-src *;">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-eval' *; script-src 'self' 'unsafe-eval' 'unsafe-eval' *"> 

<span>None</span>
<div id="invoice">
    <span> Invoice Info </span>
    <span> 2020-07-20 </span>
    <span> $$$  </span>
</div>
<button class="btn btn-info" onclick="downloadPDF()">Download PDF</button>

並添加此腳本jspdf.min.js和dom-to-image.min.js

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>

使用此函數轉換為PDF

 function downloadPDF(){
    domtoimage.toPng(document.getElementById('invoice'))
        .then(function (blob) {
            var pdf = new jsPDF('l', 'pt', [$('#invoice').width(), $('#invoice').height()]);

            pdf.addImage(blob, 'PNG', 0, 0, $('#invoice').width(), $('#invoice').height());
            pdf.save("test.pdf");

            that.options.api.optionsChanged();
        });

        }

在Phonegap App中下載HTML/頁面為PDF

問題描述

1 個解決方案

解決方案1
2 2020-07-20 12:09:00

在Phonegap App中下載HTML/頁面為PDF

問題描述

1 個解決方案

解決方案1 2 2020-07-20 12:09:00

解決方案1
2 2020-07-20 12:09:00