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

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 放入 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 ，你可以把它保存在你想要的地方