javascript - 样式选项未应用于 html-to-img

Question

我正在尝试使用 html-to-img 包来下载图像。
我传递给调用的样式选项似乎没有被应用。

不确定这是否是 html-to-img 的错误......或者我做错了什么。

寻找有该包裹经验的人，愿意伸出援助之手...

代码重新创建问题可以在这里看到... https://codesandbox.io/s/broken-surf-0kc42?file=/pages/index.js

Answer 1

我通过在选项中将位置设为静态来解决此问题...顶部和左侧选项不起作用

htmlToImage
    .toPng（元素，{
      背景颜色：“白色”，
      风格： {
        位置：“静态”
      },
    })
    .then（函数（dataUrl）{
      常量链接 = document.createElement("a");
      link.download = "图表.png";
      链接.href = dataUrl;
      链接.click();
    });

Answer 2

原因

它不会显示在您下载的图像中，因为浏览器不会呈现它。

可能的解决方案

例如，您可以制作一些快速动画，将其打印然后返回。

或者，您可以使用画布，然后下载画布。

Answer 3

改用 html2canvas 吗？

import html2canvas from "html2canvas"

html2canvas(element).then((canvas) => {
  const dataURL = canvas.toDataURL()
  const link = document.createElement("a")
  link.download = "myDownload.png"
  link.href = dataURL
  link.click()
});