У меня ошибка в библиотеке Html2Canvas - Vue

Я хочу сделать скриншот на карте Google Maps. Я реализую код библиотеки по умолчанию и получаю следующую ошибку в консоли. Неперехваченный (в обещании) Предоставленный элемент не находится в документе. Он пытался реализовать обещание с помощью .then, но это тоже не работает. Я не знаю, понята ли проблема.

Я оставляю код здесь ниже

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>

Показываю ошибку Неперехваченный (в обещании) Предоставленный элемент не находится в документе

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
977
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас есть ошибка шаблона, которая останавливает визуализатор Vue </template>.

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

песочница

спасибо за ответ. Но я все равно не вижу вины. ¿Мне нужно вставить @click в <h1 @click = "print">Распечатать меня!</h1>, чтобы сделать захват? Я пробовал, но все равно не получается

Jaime García 21.01.2019 10:18

Тогда я должен <h1 @click = "print">напечатать меня!</h1> ? @kb_

Jaime García 21.01.2019 10:37

Пример холста jsfiddle.net/mani04/r4mbh6nu vue konova codeandbox.io/s/github/konvajs/site/tree/master/vue-demos/…

KB_ 21.01.2019 10:57

Другие вопросы по теме