React pdf.js doesn't showing e-signature

리액트에서 pdfjs-dist 라이브러리를 사용하여 pdf 파일을 canvas로 그리는 작업을 하고 있었는데, 업로드된 서명이 도통 로드 되지가 않는다.

 

 

위처럼 인감을 넣고, 백엔드로 보내주면 e-signature가 된 후 다시 프론트에서 요청하여 서명된 pdf가 canvas에 랜더링 되어야 하는데,

 

랜더링이 안된다.

 

콘솔을 보면 다음과 같이 Warning: Unimplemented widget field type "Sig", falling back to base field type.라고 보여준다.

 

pdf Response를 확인해보면 SigFlags가 1로 Set되어 있는데, 그 밑에는 Signature에 무엇으로 서명 되었는지, 누구에 의해 서명되었는지 등을 나타내주는 것을 볼 수있다.

 

Mozila에서 개발한 pdf.js 라이브러리에서 무려 7년전에 이슈로 등록되어 있지만 Signature에 대해 Not implemented인 상태이다. (참고: https://github.com/mozilla/pdf.js/issues/4743)

E-signature not showing up in pdf.js viewer · Issue #4743 · mozilla/pdf.js

 

필자는 pdfjs-dist 라이브러리를 설치한 상태이며, v2.7.570으로 latest 버전을 사용중이다. 

 

현재는 임시방편으로 다음과 같이 사용중이다.

 

`node_modules/pdfjs-dist/build/pdf.worker.js`를 열고, 20223~20227 라인을 주석해줬다.

 

```javascript

if (data.fieldType === "Sig") {
  data.fieldValue = null;
  this.setFlags(_util.AnnotationFlag.HIDDEN);
  data.hidden = true;
}

```

 

위와 같이 주석해주면 hot reloading에 의해 다시 컴파일되고, 캐시를 날려준 후 테스트해본다.

 

이제 잘 나온다.