Javascript 代码在 JSFiddle 中有效，但在浏览器中无效

Question

我正在尝试创建一个按钮来下载页面的 contents/HTML。我在 JSFiddle 中测试了以下代码：https://jsfiddle.net/nf34mj9y/2/。单击时，该按钮会创建一个自动保存的 PDF。

但是当我在浏览器中测试代码时 (Chrome)，按钮什么也没做。可以单击它，但单击不会生成 PDF。根本不值一提。这是代码：

<!DOCTYPE html>
<html>
<head>
    <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' *"> 
</head>
<body>
<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>

<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>
<script>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();
       });

       } </script>
</body>

</html>

为什么它在 JSFiddle 中有效，但在我的浏览器中无效？难道是我的环境？

或者我把脚本放在了错误的地方？我们将不胜感激任何帮助。

编辑：我尝试将 Javascript 放入单独的 JS 文件中。这是 HTML 页面：

<!DOCTYPE html>
<html>
<head>
    <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' *">
    <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>
    <script type="text/javascript" src="js/somescript.js"></script>
</head>
<body>
<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>

</body>

</html>

并且 Javascript 在单独的 .js 文件中：

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();
       });

       }

不幸的是，仍然无法正常工作。

这是控制台的屏幕截图：

Answer 1

出于安全原因，它似乎无法正常工作。

来自 Chrome 扩展 CSP 文档：

内联JavaScript不会被执行。此限制禁止内联块和内联事件处理程序（例如）。

您的扩展程序中不能包含内联脚本 HTML，例如：

<script>alert("I'm an inline script!");</script>

<button onclick="alert('I am an inline script, too!')">

相反，您必须将脚本放入单独的文件中：

<script src="somescript.js"></script>

Answer 2

很抱歉添加另一个答案，这里的格式更好。使其适用于 me.I 只是删除了 head 标签开头的两个元标签。还向包含的脚本添加了 defer 属性。

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();
  });
}

document.querySelector('#download-button').addEventListener('click', downloadPDF);

<!DOCTYPE html>
<html>

<head>
  <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>
</head>

<body>
  <span>None</span>
  <div id="invoice">
    <span> Invoice Info </span>
    <span> 2020-07-20 </span>
    <span> $$$  </span>
  </div>
  <button class="btn btn-info" id="download-button">Download PDF</button>
  <script defer type="text/javascript" src="index.js"></script>
</body>

</html>

Javascript 代码在 JSFiddle 中有效，但在浏览器中无效

Javascript code works in JSFiddle but does not work in browser

javascript

jquery

cordova

phonegap

jspdf