TypeError: e3 is not an Object.

[Lucascuibu]

I am writing a Vue component:

<template>
    <div class="flex gap-6 w-full h-full" id="content-to-print">
        <div class="w-1/2">
            <button @click="generatePDF">Download image</button>
        </div>
        <div class="w-1/2 flex-1 shirnk border-l mt-0">
      <vueflow />
        </div>
    </div>
</template>

<script setup lang="ts">
import {onMounted } from 'vue';
import vueflow from './vueflow.vue';
import html2PDF from 'jspdf-html2canvas';
const node = document.getElementById('content-to-print');
function generatePDF() {
  html2PDF(node!, {
    jsPDF: {
      format: 'a4',
    },
    imageType: 'image/jpeg',
    output: './pdf/generate.pdf'
  });
};

And received following error:

[Error] Unhandled Promise Rejection: TypeError: e3 is not an Object. (evaluating '"length" in e3')
    (anonymous function) (jspdf-html2canvas.js:17390)
    Promise
    g2 (jspdf-html2canvas.js:17369)
    generatePDF (Roadmap.vue:11)
    callWithErrorHandling (chunk-J6475X5X.js:1565)
    callWithAsyncErrorHandling (chunk-J6475X5X.js:1573)
    invoker (chunk-J6475X5X.js:9397)

[johnnywang1994]

@Lucascuibu Hi, thanks for issuing, as the error message said: "e3 is not an Object", as for Vuejs rendering process, your variable "node" would still be "undefined" when the setup function runs, try to adjust something like following may solve the issue, thank you. (and it would be even better to use "ref" when accessing dom object in Vuejs)

function generatePDF() {
  const node = document.getElementById('content-to-print');
  html2PDF(node!, {
    jsPDF: {
      format: 'a4',
    },
    imageType: 'image/jpeg',
    output: './pdf/generate.pdf'
  });
};