javascript - How to convert html component to pdf print in nuxt js projects - doc.fromHTML true usage - Stack Overflow

admin管理员组

文章数量:1026925

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

Share Improve this question Follow edited Jan 28, 2021 at 3:47 Zac Anger 7,81722 gold badges2020 silver badges4747 bronze badges asked Jan 27, 2021 at 19:46 user11083200user11083200 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

Share Improve this question Follow edited Jan 28, 2021 at 3:47 Zac Anger 7,81722 gold badges2020 silver badges4747 bronze badges asked Jan 27, 2021 at 19:46 user11083200user11083200 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签：