NextJS 中的 Html-to-image 无法正常工作，下载了相同的参考

Posted 2023-03-06

【中文标题】NextJS 中的 Html-to-image 无法正常工作，下载了相同的参考

【英文标题】：Html-to-image in NextJS not working properly, downloaded the same reference

【发布时间】：2021-12-03 10:42:56

【问题描述】：

我在使用 Next.js 项目中的 html-to-image 库时遇到了一些问题。 这是我用html-to-image转换图像的代码

import Image from "next/image";
import toPng from 'html-to-image'

const divReferenceA = useRef(null);
const divReferenceB = useRef(null);
const [type, setType] = useState(true)

const convertDivToPng = async div => 
    const data = await toPng(div, 
      cacheBust: true,
      canvasWidth: 842,
      canvasHeight: 595,
    );
    return data;
  ;

const handleDownloadA = async e => 
    try 
      const data = await convertDivToPng(divReferenceA.current);
      if (data) 
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image A.png";
        link.click();
      
     catch (e) 
      console.log(e, "ini error sertifikat");
    
  ;

const handleDownloadB = async e => 
    try 
      const data = await convertDivToPng(divReferenceB.current);
      if (data) 
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image B.png";
        link.click();
      
     catch (e) 
      console.log(e, "ini errornya");
    
  ;

return (
    <div ref=divReferenceA> ... content with <Image /> from next-image </div>
    <button onClick=e => handleDownloadA(e)>
        Download
    </button>
    type == true ? (
        <div className="position-relative p-0 d-flex" ref=divReferenceB> 
            ... content with <Image /> from next-image but different image from refA </div>
        <button onClick=e => handleDownloadB(e)>
            Download
        </button>
    ) : <div> </div>

我的问题是当我加载页面并单击divRefferenceA 的下载按钮时，我将成功转换并下载整个 div。但是，当我点击divRefferenceB 的下载按钮后，我会再次下载divRefferenceA 的div。但是当我console.log(divRefferenceB.current) 时，它会按预期显示divRefferenceB。

所以我再次重新加载页面，我按下divRefferenceB下载按钮，我将成功转换并下载divRefferenceB的整个div，但在我按下divRefferenceA的下载按钮后，我将下载@ 987654332@。所以我猜每次我第一次下载东西时，dataURL 会一直存在，除非我重新加载页面。不知道发生了什么。

但是，我尝试了一些东西。我在我的页面中创建了另一个 div：

const testRef = useRef(null)

const handleDownloadTest = async e => 
    try 
      const data = await convertDivToPng(testRef.current);
      if (data) 
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image B.png";
        link.click();
      
     catch (e) 
      console.log(e, "ini errornya");
    
;

<div ref=testRef>
   <div>a</div>
   <div>a</div>
   <div>a</div>
</div>

当我下载此 div 并按预期工作时，问题不会发生。我很混乱。 nextImage 有问题吗？我不确定发生了什么。试了这两天，还是没能解决问题。

【参考方案1】：

请检查

  const FancyButton = React.forwardRef((props, ref) => (
  <button ref=ref className="FancyButton">
    props.children
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref=ref>Click me!</FancyButton>;

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票。