javascript - 使用 dom-to-image 库下载时排除元素

Question

我正在使用dom-to-image库将组件下载为 png 图像。但是我希望从下载的图像中排除一些元素，例如关闭按钮等

我尝试使用这种方法，设置可见的真/假并用 CSS 隐藏它：

const [visible, setVisible] = React.useState(true);

    const closeClassName = classNames(classes.visible, {
        [classes.hidden]: visible === false,
    });

    const downloadTemperaturesGraph = React.useCallback(() => {
        if (chartRef.current) {
            setVisible(false);
            domtoimage.toBlob(chartRef.current, { bgcolor: 'white' }).then((blob) => {
                fileDownload(blob, `${title}.png`);
            });

            setTimeout(() => {
                setVisible(true);
            });
        }
    }, [chartRef, title]);

有没有更好的方法呢？这可以通过库的过滤器选项来完成吗？

标签： javascriptreactjstypescript

Answer 1

可以使用过滤器选项来完成：

 const closeRef = React.useRef<HTMLDivElement>(null);

 const downloadTemperaturesGraph = React.useCallback(() => {
        if (chartRef.current) {
            domtoimage
                .toBlob(chartRef.current, {
                    bgcolor: 'white',
                    filter: (node: Node) => node !== closeRef.current,
                })
                .then((blob) => {
                    fileDownload(blob, `${title}.png`);
                });
        }
    }, [chartRef, title]);