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

Question

我正在尝试创建一个按钮来下载页面的内容/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

很抱歉添加另一个答案，这里的格式更好。让它对我有用。我刚刚删除了你头部标签开头的两个元标签。还为包含的脚本添加了 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>

Answer 2

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

来自 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>