jsPDF is not defined-CodePudding

I'm trying to use jsPDF with Vue but I get a ReferenceError: jsPDF is not defined. See the snippet :

let jsPrint = () => {
  const doc = new jsPDF()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
  <button onclick="jsPrint()">
    print
  </button>

The script is linked in the head tag :

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $site->title() ?> - <?= $page->title() ?></title>
    <link rel="stylesheet" href="<?= url('assets') ?>/css/style.css">

    <!--========== JSPDF ==========-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    
    <!--========== VUE ==========-->
    <!-- development version, includes helpful console warnings -->
    <script src="<?= url('assets') ?>/js/libs/vue.js"></script>
    <script src="<?= url('assets') ?>/js/app.js" type="module" defer></script>
</head>

Then in a component, I have a method that should be triggered on click on a button :

exportSimple: function() {
            const doc = new jsPDF()
            // const target = document.querySelector('#dialog-export-content')
            // doc.html(target, {
            //     callback: function(doc) {
            //         doc.save()
            //     },
            //     x: 10,
            //     y: 10
            // })
            
        }

But i throws an error.

I tried alternative methods to link the library : local, npm, other sources like jspdf.es.min.js. Nothing works.

Any idea ?

CodePudding user response：

Using CDN the jsPDF object is available as property of jspdf which is available globally :

const { jsPDF } = jspdf
let print = () => {
  const doc = new jsPDF()
}