Vue CLI 应用程序中带有 jsPDF 的 html2canvas 不起作用答案

【问题标题】：html2canvas with jsPDF in Vue CLI application don't workVue CLI 应用程序中带有 jsPDF 的 html2canvas 不起作用
【发布时间】：2020-09-08 07:59:15
【问题描述】：

我尝试在我的 Vue CLI 应用程序中集成 jsPDF 和 html2canvas，但它不起作用...... 我受到互联网上一个例子的启发，但我的控制台返回“Object(...) is not a function”

这是我的代码

<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>

【问题讨论】：

请发布有关您的问题的更多上下文：您的代码的哪一行产生了错误消息？

标签： vue.js jspdf html2canvas

【解决方案1】：

为什么在你的方法中返回 promise？

<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>

【讨论】：

【解决方案2】：

你是对的。我只是复制了一个在互联网上找到的代码，但最后，我不需要它的所有元素。

这是我的新代码（更简单但总是返回相同的错误...）

<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>

【讨论】：

【解决方案3】：

问题解决了！

我只是换了

import { html2canvas } from 'html2canvas';

与

import * as html2canvas from 'html2canvas';

【讨论】：