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

出於安全原因，它似乎無法正常工作。

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

很抱歉添加另一個答案，這里的格式更好。 讓它對我有用。我剛剛刪除了你頭部標簽開頭的兩個元標簽。 還為包含的腳本添加了 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 中有效，但在瀏覽器中無效

問題描述

2 個解決方案

解決方案1
1 2020-07-21 07:54:54

解決方案2
1 已采納 2020-07-21 11:28:35

Javascript 代碼在 JSFiddle 中有效，但在瀏覽器中無效

問題描述

2 個解決方案

解決方案1 1 2020-07-21 07:54:54

解決方案2 1 已采納 2020-07-21 11:28:35

解決方案1
1 2020-07-21 07:54:54

解決方案2
1 已采納 2020-07-21 11:28:35