Use imported script inside development build of Vue-CodePudding

I'm currently building an application and, and I applied vue 3 only in one page via script.

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>

I'm trying to use the imported module (jsPdf) via a script, and it is not working.

methods: {
  generateReport() {
    let pdfName = 'test'; 
    var doc = new jsPDF();
    doc.text("Hello World", 10, 10);
    doc.save(pdfName   '.pdf');
  }
}

This is the error when I'm trying to do the method above:

Uncaught ReferenceError: jsPDF is not defined

Is it possible to use the module imported using script in the development build of Vue? or is there any other way to generate pdf without importing scripts?

CodePudding user response：

Try like following snippet

const { jsPDF } = jspdf
const app = Vue.createApp({
  el: "#demo",
  methods: {
    generateReport() {
      let pdfName = 'test'; 
      var doc = new jsPDF();
      doc.text("Hello World", 10, 10);
      doc.save(pdfName   '.pdf');
      console.log(doc)
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<div id="demo">
  <button @click="generateReport">pdf</button>
</div>

CodePudding user response：

Have you imported the library in the .vue file you are trying to use it in?
import { jsPDF } from "jspdf";