0

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

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

4

1 回答 1

0

我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，您可以将其保存在您想要的位置

于 2021-06-10T07:35:42.900 回答