Vue.js и vuetify, как реализовать создание и загрузку файла PNG из компонента Vue?

Question

Скажем, у меня есть компонент vue, например карточка, как показано по ссылке ниже и на изображении ниже.

https://vuetifyjs.com/en/components/cards/#v-card-actions

Как мне реализовать функцию, при которой пользователь может нажать кнопку или что-то, что загрузит файл .png с изображением этой карты?

Моя текущая реализация использует библиотеку «dom-to-image-more» https://github.com/tsayen/dom-to-image

Но при использовании этой библиотеки у меня возникают проблемы с загрузкой файлов, как на изображении ниже.

Мои радиокнопки превращаются в текст при загрузке PNG.

Моя текущая реализация похожа на

      domTOIMAGE.toPng(document.getElementById('cheese')).then((dataUrl: any) => {
        var theLink = document.createElement('a')
        theLink.download = 'tactic-performance.png'
        theLink.href = dataUrl
        theLink.click()
      }) 

Может ли кто-нибудь помочь мне исправить мою текущую реализацию, может быть, я смогу загружать только части экрана в виде файла PNG, если это возможно с помощью библиотеки 'dom-to-image-more'? У меня также есть меню, которое появляется во время загрузки, и я не хочу там находиться. Так что, если бы я мог скачать около 90% того, что хочу скачать, это было бы здорово.

Если я не могу использовать эту библиотеку, я открыт для любых других предложений! Большое спасибо за помощь :)

Answer 1

я использую html-to-imageпакет для этой цели, и он отлично работает. вот ссылка https://www.npmjs.com/package/html-to-image

кроме того, если вам нужна быстрая реализация для этого, вы можете использовать этот код

      import * as htmlToImage from "html-to-image";
import { saveAs } from "file-saver";

htmlToImage
        .toBlob(document.getElementById("yourCardID"))
        .then(function (blob) {
          saveAs(blob, "screenshot.png");
        });

Если вы не можете получить результат, положите свой v-card внутри тега и назначить id к div и добейся своего результата

Примечание: здесь я использую file-saverпакет для сохранения файла https://www.npmjs.com/package/file-saver , вы также можете использовать этот метод ниже, если не хотите устанавливать другой пакет для сохранения файла

      htmlToImage
        .toBlob(document.getElementById("yourCardID"))
        .then(function (blob) {
          const a = document.createElement("a");
          a.href = URL.createObjectURL(blob);
          a.download = "screenshot.png";
          a.click();
        });

Кроме того, если вы хотите просто сохранить blob , вы можете сохранить это там, где хотите