in my nuxt project ı want to convert my html poenent to pdf. when clicked button ı want to convert poenent with all color to pdf.

import {jsPDF} from 'jspdf'
 
export default {
 
    data() {
        return {
             margins : {  top: 80,   bottom: 60, left: 40,  width: 522  }  }
    },
    methods: {
        generatePdf() {
            const doc = new jsPDF('p', 'pt', 'A4'); 
            doc.fromHTML(this.$refs.testHtml, this.margins.left, this.margins.top,{
                'width' : this.margins.width
            });
            doc.save('test.pdf');
        }
    }

}

in here , the problem is about doc.fromHTML. in many project this way is valid but in nuxt doc.fromHTML doesnt work . it gives error.

in my nuxt project ı want to convert my html poenent to pdf. when clicked button ı want to convert poenent with all color to pdf.

import {jsPDF} from 'jspdf'
 
export default {
 
    data() {
        return {
             margins : {  top: 80,   bottom: 60, left: 40,  width: 522  }  }
    },
    methods: {
        generatePdf() {
            const doc = new jsPDF('p', 'pt', 'A4'); 
            doc.fromHTML(this.$refs.testHtml, this.margins.left, this.margins.top,{
                'width' : this.margins.width
            });
            doc.save('test.pdf');
        }
    }

}

in here , the problem is about doc.fromHTML. in many project this way is valid but in nuxt doc.fromHTML doesnt work . it gives error.

• javascript
• reactjs
• vue.js
• nuxt.js
• jspdf

• thx for editing my question but my priority is an answer for my question not editing – user11083200 Commented Jan 28, 2021 at 5:39

3 Answers 3

I'm late but someone can use this solution.

Use this method:

 printReport() {
     window.print();
  },

<button onClick="printReport">Print !</button>

If you want to hide somthing when printing, use this in CSS.

 @media print {
     .no-printme {
    display: none !important;
  }
  .printme {
    display: block;
  }
}

use vue-html2pdf npm package this will solve your problem and also internally it uses jspdf, so you will get its configuration.

https://www.npmjs./package/vue-html2pdf

vue-html2pdf npm module does not work properly. Rather than you can try html2pdf module for convert html to pdf in vuejs.

Package link: https://www.npmjs./package/html2pdf.js/v/0.9.1