자바스크립트, 타입스크립트

페이지 프린트시 각 페이지마다 header, footer 넣어주기

manyYun 2024. 8. 29. 16:50

 

https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a

 

The Ultimate Print HTML Template with Header & Footer

create printable HTML pages using a reusable template with a header and a footer that repeat on every page.

medium.com

결과적으로 위 링크는 참고하지않았고

 

https://pagedjs.org/documentation/

 

How to use Paged.js —

 

pagedjs.org

이걸썼다

 

pdf다운로드 기능을 만들어야했는데, 기존에 이미 적용돼있던 pdf 스타일 적용 기능은 너무 한정적이고 새로 알아야할 것들이 너무 많아서 js로 스타일 적용이 가능한 라이브러리를 찾아야했다. 일단 꼭 적용돼야할 사항은

 

1. 시안대로 스타일 적용이 가능해야함 (table, list, 배경색 등등)

2. 페이지마다 header, footer 부분에 공통적으로 이미지 or 텍스트가 들어가야함

3. 페이지마다 footer 우측에 페이지 숫자가 들어가야함

 

생각보다 페이지마다 페이지 숫자가 들어갈 수 있게끔 해주는 라이브러리가 잘 안보여서 초조했는데 다행히 paged.js 가 위 세가지 옵션을 전부 충족해주었다.

 

대신 이대로 작업하게되면 pdf 파일이 바로 다운되는게 아니라 인쇄 페이지로 넘어가게끔 변경해야했는데,

인쇄페이지에서도 pdf 다운로드가 가능하고 인쇄를 필요로 할 수도 있다는 말에 적당히 합의해서 결정했었다.

 

 

+) html pdf 저장시 파일명 변경하는법

document.title = "파일명.pdf"