0

I want to make a screenshot on the google maps map. I implement the code, by default, of the library and I get the following error by console. Uncaught (in promise) Provided element is not within a Document. He tried to implement a promise with .then, but it does not work either. I do not know if the problem is understood.

I leave the code here below

HTML

<template>
  <div>
    <div ref="printMe">
      <h1>Print me!</h1>
    </div>
    <img :src="output">
  </div>
<template>

COMPONENT.VUE

<script>
export default {
  data() {
    return {
      output: null
    }
  },
  methods: {
    async print() {
      const el = this.$refs.printMe;
      const options = {
        type: 'dataURL'
      }
      this.output = await this.$html2canvas(el, options);
    }
  }
}
</script>

I show a bug Uncaught (in promise) Provided element is not within a Document

Jaime García
  • 3
  • 3

1 Answers1

0

You have a template error that stops the Vue renderer </template>

<template>
  <div>
    <div ref="printMe">
      <h1>Print me!</h1>
    </div>
    <img :src="output">
  </div>
</template>

sandbox

KB_
  • 2,113
  • 2
  • 26
  • 28
  • 1
    thanks for you answer. But I still don´t see the fault. ¿I have insert a @click in

    Print me!

    to make the capture? I have tried it but it's still failing     – Jaime García Jan 21 '19 at 09:18
  • Then, I must can

    Print me!

    ? @kb_     – Jaime García Jan 21 '19 at 09:37
  • https://jsfiddle.net/mani04/r4mbh6nu/ canvas example vue konova https://codesandbox.io/s/github/konvajs/site/tree/master/vue-demos/basic_demo?from-embed – KB_ Jan 21 '19 at 09:57