0

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

card

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

radio buttons

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 :)

benwasin97
  • 203
  • 4
  • 12

1 Answers1

0

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

Shamsail
  • 612
  • 6
  • 17
  • Unfortunately, my main issue in my post is still there. Basically my vuetify popup menu shows in the png capture, as well as the radio buttons change to radio_button_checked – benwasin97 Jun 10 '21 at 15:43
  • @benwasin97 did you try to put all things in the outer `div` as well? – Shamsail Jun 10 '21 at 15:48
  • I did try that @Shamsail, eventually I figure out that you can pass a filter parameter that takes out certain dom elements. However, I am now having trouble to download on fullscreen – benwasin97 Jun 10 '21 at 17:50