Question

我目前正在通过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存储库，并将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应用中将HTML /页面下载为PDF

1 个答案: