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

Question

我正在使用dom-to-image库下载组件作为png图像。然而，我想从下载的图像中排除一些元素，如关闭按钮等

我尝试了这种方法，设置可见的true/false，并用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]);

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

Answer 1

可以使用filter选项完成此操作：

 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]);