在 Phonegap 应用程序中以 PDF 格式下载 HTML/页面答案

【问题标题】：Download HTML/Page as PDF in Phonegap App在 Phonegap 应用程序中以 PDF 格式下载 HTML/页面
【发布时间】：2020-11-09 10:23:52
【问题描述】：

我目前正在通过 Phonegap 使用 HTML/CSS/JS 编写移动应用程序。我只想将当前页面的内容保存为 PDF 文件。

我尝试过 jsPDF 和 html2PDF，但无济于事。在我的 Chrome 浏览器中进行测试后，每个结果都只留下一个可点击的按钮，什么都不做。

由于我是 JavaScript 新手，如果我错了，请纠正我 - 为了测试代码，我只需在浏览器中打开 HTML 文件，代码应该可以运行吗？我一直在测试我找到的以下代码 on the 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，那也是完美的。

编辑：控制台中的错误：

【问题讨论】：

标签： javascript cordova phonegap jspdf html2pdf

【解决方案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();
        });

        }

【讨论】：

它在 JSFiddle 中工作，但我无法让它在浏览器中工作。我尝试将脚本基本上放在 HTML 文档的任何位置，但无济于事。
尝试使用phonegap服务并检查它是否在浏览器中工作
仍然无法在 phonegap 服务器上运行 :( 代码的一次迭代在控制台中出现了一些错误。我将它们添加到上面的原始帖子中。不知道它们的意思。
此警告消息与 Meta Tag 相关尝试删除它并检查它是否在浏览器中工作，并尝试导出 apk 并检查您的手机是否使用此标记 Meta