I've been working on a feature within a Vuejs project that allows users to export a PDF containing specific Vuejs components by clicking a button. Everything was going smoothly until I encountered an issue. After npm installing the jsPDF and html2canvas packages, I added jsPDF to the component as follows:
import jsPDF from 'jspdf'
The function triggered on button click looks like this:
exportpdf() {
let pdf = new jsPDF('p', 'px', 'a4')
pdf.addHTML(this.$refs.userinfo, function() {
pdf.save('web.pdf')
})
}
Upon triggering the function, I received the error message:
Uncaught (in promise) Error: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js...
This led me to the following issue: Using jsPDF and html2canvas with es6, which explains that jsPDF requires html2canvas to be accessible globally. However, integrating it in this manner is not recommended in Vuejs, as discussed in this article:
Inspired by the article, I included the html2canvas package in main.js:
import html2canvas from 'html2canvas'
...
Vue.use(html2canvas)
Now when I trigger the function, I encounter the error:
Uncaught (in promise) Provided element is not within a Document
I also attempted using document.querySelector('#userinfo'), but faced the same issue. At this point, I'm at a standstill and would greatly appreciate any assistance.