image, xml, javascript, css, font 파일을 base64 로 치환하여 html 적용해 보기

image, xml, javascript, css, font 파일을 base64 로 치환하여 html 에 적용해 보기

 

html 을 pdf 로 변환할 경우

 

image, xml, javascript, css, font 관련된 파일을 base64 로 치환하여 사용하는 방법입니다.

온라인 환경이 되지 않은 경우 사용하기 좋은 방법입니다. 

 

참고로 https://selectpdf.com/html-to-pdf-api/ 경우 html 태그를 사용하여 pdf 로 변환해 주는 컴포넌트입니다. 이 경우 폰트가 적용되지 않아, 이를 base64 로 폰트 형태를 아래와 같이 만들어서 사용하면, pdf 로 변환할 경우 폰트가 제대로 적용되는 것을 확인하였습니다.

 

HTML 에서 base64 활용하는 방법(이미지, xml, javascript, css)

 

JPEG IMAGES: <img src="data:image/jpeg;base64,YOUR BASE64 STRING HERE"/>
PNG IMAGES:  <img src="data:image/png;base64,YOUR BASE64 STRING HERE"/>
GIF IMAGES:  <img src="data:image/gif;base64,YOUR BASE64 STRING HERE"/>
XML IMAGES: <xml><image>data:image/jpeg;base64,YOUR BASE64 STRING HERE</image></xml>
** replace image/jpeg with image/png or image/gif if you're not using jpegs
JAVASCRIPTS: <script type="text/javascript" src="data:text/javascript;base64,YOUR BASE64 STRING HERE"></script>
CSS: <link rel="stylesheet" type="text/css" href="data:text/css;base64,YOUR BASE64 STRING HERE"/>

 

 

CSS 에서 Base64 사용하는 방법

 

IMAGES: .yourclass {background: url('data:image/jpeg;base64,YOUR BASE64 STRING HERE');}
** replace image/jpeg with image/png or image/gif if you're not using jpegs
OPENTYPE FONTS: @font-face{font-family:'yourfontname'; src: url(data:font/opentype;charset=utf-8;base64,YOUR BASE64 STRING HERE);}
WOFF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-woff;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff);}
WOFF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-woff2;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff2);}
TTF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');}

 

 

적용해 보기

 

구글에서 나눔고딕 ttf 파일을 다운로드 받아서 base64로 변환해 주는 온라인 사이트 "https://www.giftofspeed.com/base64-encoder/" 에 접속하여 해당 base64 문자열을 아래와 같이 ;base64, 다음에문자열을 넣었습니다.

@font-face {
    font-family: 'Nanum Gothic';
    src: url(data:application/font-ttf;charset=utf-8;base64,AAEAAAAPAIAAAwBwT1M~~~~~~~~) format('truetype');
}

body {
    font-family: Nanum Gothic;
}

 

NanumGothic-Regular.ttf

3.90MB

 

 

 

참고 사이트

 

파일을 base64 로 만들어 주는 온라인 사이트

 

https://www.giftofspeed.com/base64-encoder/

File to Base64 Encoder

 

구글 폰트 다운로드

 

https://fonts.google.com/

Google Fonts