未定义 jsPDF

Question

我正在尝试将 jsPDF 与 Vue 一起使用，但我得到了 ReferenceError: jsPDF is not defined。查看代码段：

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>

脚本在 head 标签中 linked :

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

然后在一个组件中，我有一个应该在单击按钮时触发的方法:

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
            // })
            
        }

但是我抛出一个错误。

我尝试了 link 库的替代方法：本地、npm、其他来源，如 jspdf.es.min.js。没有任何效果。

有什么想法吗？

Answer 1

使用 CDN，jsPDF 对象作为 jspdf 的属性可用，可在全球范围内使用：

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

未定义 jsPDF

jsPDF is not defined

referenceerror

jspdf

vue.js