Working with jsPDF and html2canvas in a Vuejs project (without webpack)

Question

I am working on a functionality in a Vuejs project, by which by clicking on a button, the user can export a pdf which will contain certain Vuejs components. All went smooth up to a point. I npm installed the 2 packages, jsPDF and html2canvas (which is a dependency). I added jsPDF to the component like so:

import jsPDF from 'jspdf'

The function that gets triggered on button click is:

exportpdf() {
    let pdf = new jsPDF('p', 'px', 'a4')
    pdf.addHTML(this.$refs.userinfo, function() {
         pdf.save('web.pdf')
    })
}

When the function was triggered on button click, I got the following error:

Uncaught (in promise) Error: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js...

And so, I got to this issue here: Using jsPDF and html2canvas with es6 which explains that jsPDF requires html2canvas to be on the window. But this is just a huge no no in Vuejs (see article here): https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

So, inspired by this article, I added the html2canvas package to main.js:

import html2canvas from 'html2canvas'
...
Vue.use(html2canvas)

Now, when the function is triggered I get this:

Uncaught (in promise) Provided element is not within a Document

I also tried with document.querySelector('#userinfo') - same result. So now I consider myself officially stuck - any help is greatly appreciated.

Steven Spungin · Accepted Answer · 2018-08-09 12:24:53Z

1

html2canvas is not a Vue plugin, so you cannot call use(...) on it.

You can make your own plugin though.

import html2canvas from 'html2canvas'

let MyPlugin = {
  install(Vue, options) {
    window.html2canvas = html2canvas
  }
}

// ...
Vue.use(MyPlugin)

I am not really sure why you are opposed to window.html2canvas = html2canvas if another library needs it.

edited Aug 9, 2018 at 12:24

answered Aug 9, 2018 at 12:19

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

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

2 Comments

Iulia Mihet Over a year ago

OK, I understand and indeed, I cannot use it (I'm new to Vuejs). But the whole idea here was to avoid assigning html2canvas to the window object. I don't see how this solves the issue, only that it wraps the assignment in a plugin.

Steven Spungin Over a year ago

You seemed to want to 'encapsulate the fix' code in a plugin per your example and external reference... If jsPDF expects a global window object, there is nothing wrong with assigning it. This is not a 'Vue' issue at all.

Collectives™ on Stack Overflow

Working with jsPDF and html2canvas in a Vuejs project (without webpack)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related