Vue.js 和 vuetify 如何实现从 Vue 组件创建和下载 PNG 文件？

问题描述

假设我有一个像卡片一样的 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% 的内容，那就太好了

如果我不能使用这个库，那么我愿意接受任何其他建议！非常感谢您的帮助:)

解决方法

我为此使用了 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 放在 div 标签中并将 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 ，您可以将其保存为您想要的位置

dom-to-image javascript png vue.js vuetify.js