Vue.js and vuetify how to implement creating and downloading a PNG file from a Vue component?

Question

Say I have a vue component like a card as show in the link below and the image below

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

How would I implement functionality where a user can click a button or something that will download a .png file with a picture of this card?

My current implementation is using the "dom-to-image-more" library https://github.com/tsayen/dom-to-image

But using this library I get some issues on file downloads like in the image below

My radio buttons turn into text in my PNG download.

My current implementation is like

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

Could someone help me to fix my current implementation, maybe I could only download parts of the screen as the PNG file, if thats possible with the 'dom-to-image-more' library? I also have a menu that pops up during my download that I dont want to be there. So If I could download like 90% of what I want to download that would be great

If I cant use this library then I am open to any other suggestions! Thank you so much for the help :)

Answer 1

I use html-to-image package for this purpose and it works fine. here is the link https://www.npmjs.com/package/html-to-image

moreover if you want a quick implementation for this, you can use this code

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

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

If you are unable to get result put your v-card inside a div tag and assign id to div and achieve your result

Note: here I'm using file-saver package to save file, https://www.npmjs.com/package/file-saver , you can also use this below method if you don't want to install another package to save file

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

Also, if you want to just save the blob , you can save this as it is where you want