CODEWITHSUNDEEP
vue.jsjspdfhtml2canvas
TooKi
TooKi

Reputation: 21

html2canvas with jsPDF in Vue CLI application don't work

I try to integrate jsPDF and html2canvas in my Vue CLI application but it doesn't work... I was inspired by an example on the internet but my console returns "Object(...) is not a function"

Here is my code

<template>
    <div>
        <div ref="pdf">
            Content
        </div>

        <button @click="download">Download PDF</button>
    </div>
</template>

<script>
    import { jsPDF } from "jspdf";
    import { html2canvas } from 'html2canvas';

    export default {
        methods: {
            download() {
                return new Promise((resolve, reject) => {
                    let windowHeight = window.innerHeight;
                    let windowWidth = window.innerWidth;

                    let pdf = new jsPDF();

                    let canvasElement = document.createElement("canvas");
                    canvasElement.width = windowWidth;
                    canvasElement.height = windowHeight;

                    html2canvas(this.$refs.pdf, {
                        canvas: canvasElement,
                        width: windowWidth,
                        height: windowHeight
                    }).then(canvas => {
                        const img = canvas.toDataURL("image/jpeg", 1);
                        document.body.appendChild(canvas);
                        pdf.addImage(img, "JPEG", 10, 10);
                        pdf.save("sample.pdf");
                        resolve();
                    }).catch(err => {
                        reject(err);
                    });
                });
            }
        }
    }
</script>

Upvotes: 1

Views: 2835

Answers (3)

TooKi
TooKi

Reputation: 21

PROBLEM SOLVED !

I simply replaced

import { html2canvas } from 'html2canvas';

with

import * as html2canvas from 'html2canvas';

Upvotes: 1

TooKi
TooKi

Reputation: 21

You're right. I simply copied a code found on the internet but finally, I don't need all of its elements.

Here is my new code (Much simpler but always returns the same error...)

<template>
    <div>
        <div ref="pdf">
            Content
        </div>

        <button @click="download">Download PDF</button>
    </div>
</template>

<script>
    import { jsPDF } from "jspdf";
    import { html2canvas } from 'html2canvas';

    export default {
        methods: {
            download() {
                let pdfRef = this.$refs.pdf;

                html2canvas(pdfRef).then(canvas => {
                    let pdfImage = canvas.toDataURL();

                    let pdf = new jsPDF();
                    pdf.addImage(pdfImage, 'PNG', 20, 20);
                    pdf.save("commande.pdf");
                })
            }
        }
    }
</script>

Upvotes: 0

Maksim Tikhonov
Maksim Tikhonov

Reputation: 790

Why do you return promise in your method?

<template>
    <div>
        <div ref="pdf">
            Content
        </div>

        <button @click="download">Download PDF</button>
    </div>
</template>

<script>
    import { jsPDF } from "jspdf";
    import { html2canvas } from 'html2canvas';

    export default {
        methods: {
            download() {
                
                let windowHeight = window.innerHeight;
                let windowWidth = window.innerWidth;

                let pdf = new jsPDF();

                let canvasElement = document.createElement("canvas");
                canvasElement.width = windowWidth;
                canvasElement.height = windowHeight;

                html2canvas(this.$refs.pdf, {
                    canvas: canvasElement,
                    width: windowWidth,
                    height: windowHeight
                }).then(canvas => {
                    const img = canvas.toDataURL("image/jpeg", 1);
                    document.body.appendChild(canvas);
                    pdf.addImage(img, "JPEG", 10, 10);
                    pdf.save("sample.pdf");
                    
                    alert('works')
                }).catch(err => {
                    alert('error')
                });
           
            }
        }
    }
</script>

Upvotes: 0

Related Questions