jspdf doesn't work when loaded from a CDN

Question

I am going to use package(jspdf) loaded from **CDN **

this is CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

and I have loaded it like this in a page :

mounted() {
  if (document.getElementById('myScript')) { return }
  let src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'
  let script = document.createElement('script')
  script.setAttribute('src', src)
  script.setAttribute('type', 'text/javascript')
  script.setAttribute('id', 'myScript')
  document.head.appendChild(script)
}

and I have a button that when you click on it a below method will called and some pdf will be generated.

generateReport() {
  var doc = new jsPDF('l', 'mm', [62, 32])
  const margins = {
    top: 0,
    bottom: 60,
    left: 0,
    width: 122
  }

  doc.fromHTML(this.$refs.print, margins.left, margins.top, {
    width: margins.width
  })

  doc.save('test.pdf')
}

BUT I get an error

So, how can I fix this error?

You loaded the CDN but where is the jsPDF variable declaration? — Diesan Romero, Mar 09 '22 at 17:32
Does this answer your question? [How to add a 3rd party script code into Nuxt?](https://stackoverflow.com/questions/67534304/how-to-add-a-3rd-party-script-code-into-nuxt) — kissu, Mar 09 '22 at 17:33
Also, are you sure that you want to use a CDN here? Pretty sure you can find the NPM package for that, it will be far better in a `package.json` tbh. — kissu, Mar 09 '22 at 17:34
@kissu i a pretty sure that this way that i used cdn is worked because i can see that script is loaded , the problem is how to use it — morteza mortezaie, Mar 09 '22 at 17:37
Looks like the variable declaration is in generateReport(), `var doc = new jsPDF( ... )`. Possibly the class name is simply not spelled `jsPDF`. Have you checked the docs? — GetSet, Mar 09 '22 at 17:38
You should probably follow the [recommended install](https://github.com/parallax/jsPDF#install) and also the [recommended usage](https://github.com/parallax/jsPDF#usage). Otherwise, in "Other module formats, Globals", it's written `const { jsPDF } = window.jspdf;`. This way, you will get it out from the window. Still, even if it's loaded and feasible use it through an NPM package since it's more easy to control, more performant and less prone to a 404. And also because it's the recommended way from the package itself. — kissu, Mar 09 '22 at 17:40

score 6 · Accepted Answer · answered Mar 09 '22 at 17:42

6

You can use const { jsPDF } = window.jspdf; as shown in the official documentation if you want to use the CDN.

Even tho, I still do recommend the NPM package way (so does the package itself).

answered Mar 09 '22 at 17:42

kissu

40,416
14
65
133

score 1 · Answer 2 · answered May 13 '23 at 15:58

1

This one seems to be working :

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>

answered May 13 '23 at 15:58

kztd

3,121
1
20
18

jspdf doesn't work when loaded from a CDN

2 Answers2