Search code examples
javascriptjquerycordovaphonegapjspdf

Javascript code works in JSFiddle but does not work in browser

I am trying to create a button that will download the contents/HTML of a page. I have tested the following code in JSFiddle: https://jsfiddle.net/nf34mj9y/2/. When clicked, the button creates a PDF that automatically saves.

But when I test the code in the browser (Chrome), the button does nothing. It can be clicked, but the clicking does not generate the PDF. Just nothing. Here is the code:

<!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>

Why does it work in JSFiddle but not in my browser? Could it be my environment?

Or maybe I've placed the scripts in the wrong places? Any and all help would be deeply appreciated.

EDIT: I have tried putting the Javascript into a separate JS file. Here's the HTML page:

<!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>

And the Javascript is in a separate .js file:

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

       }

Still not working, unfortunately.

Here's a screenshot from the console:

enter image description here

Solution

  • Sorry for adding another answer, it is formatted beter here. Made it work for me.I just removed the two meta tags at the beginning of your head tag. Also added defer attribute to included 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();
  });
}

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>