[React] html2canvas, jspdf 로 pdf 다운로드 시 s3 이미지가 안보임 - 해결

이미지를 백엔드에서 presignedUrl을 만들어서 프론트엔드로 보내주고 화면에 뿌려주는 상황.

화면에서는 분명 이미지가 잘 보이는데 html2canvas, jspdf 를 사용해서 pdf로 다운받을 때에는 이미지가 보이지 않았다.

 

이미지 크기만큼 자리를 차지하는거 보면 분명 element를 인식을 하는 것 같았다.

그런데 어떠한 에러도 나지 않고 그냥 안보였음.

 



사진 설명과 함께 이미지가 아래에 나와야 했음.

근데 이미지 부분이 하얗게 나오는 현상..

 

구글링 열심히 한 결과

S3 CORS의 문제였다는걸 알게되었음.

 

https://github.com/eKoopmans/html2pdf.js/issues/141

 

위 url 참고

 

 

 

일단 S3에서 CORS 를 허용하도록 셋팅해야한다.

이건 내가 한건 아니라서 설명 패쓰

 

https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/cors.html

CORS(Cross-Origin Resource Sharing) - AWS SDK for JavaScript

 

여기에서 참고하면 될 듯 하다.

 

코드에서 수정해야할 부분은 2가지인데

 

1. img Tag에 crossOrigin 설정 하기

<img crossOrigin="anonymous" src={imgUrl} alt={itemName} />

crossorigin="*" 로 셋팅하는 사람도 있었음 (앵귤러인듯?)

 

 

2. html2canvas 활용하는 부분에서 useCORS 옵션 추가하기.

await html2canvas(input!, { useCORS: true }).then((canvas) => {
      const imageData = canvas.toDataURL('image/png');

      const format = 'PNG';

      const imageCompression: ImageCompression = 'FAST';

      //중간 생략
      
      pdfUtil.save(`${filename}.pdf`);
    });

 

우리는 pdf 변환하는 custom hook을 만들어서 사용하고 있고, 거기에서 { useCORS: true } 를 추가해주었다.

 

그랬더니 아주 잘 나왔다!

 

끝!