Use imported script inside development build of Vue

Question

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?

Nikola Pavicevic · Accepted Answer · 2022-05-05 16:39:48Z

1

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>

answered May 5, 2022 at 16:39

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Duannx Over a year ago

If jsPDF is not defined, so how const { jsPDF } = jspdf can work?

Sconibear · Accepted Answer · 2022-05-05 16:40:07Z

0

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

answered May 5, 2022 at 16:40

Sconibear

751 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

Use imported script inside development build of Vue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related