웹 응용 프로그램에서 PDF를 만드는 방법

게시 됨: 2022-03-10
빠른 요약 ↬ 웹 응용 프로그램에서 PDF를 생성할 때 선택의 폭이 매우 다양합니다. 이 기사에서 Rachel Andrew는 사용 가능한 도구를 살펴보고 자신에게 가장 적합한 도구를 찾는 데 도움이 되는 권장 사항을 공유합니다.

많은 웹 응용 프로그램에는 사용자에게 PDF 형식으로 다운로드할 수 있는 기능을 제공해야 하는 요구 사항이 있습니다. 응용 프로그램(예: 전자 상거래 상점)의 경우 해당 PDF는 동적 데이터를 사용하여 생성되어야 하며 사용자가 즉시 사용할 수 있어야 합니다.

이 기사에서는 웹 응용 프로그램에서 바로 PDF를 생성할 수 있는 방법을 살펴보겠습니다. 도구의 포괄적인 목록은 아니지만 대신 다양한 접근 방식을 보여 주는 것을 목표로 하고 있습니다. 즐겨 사용하는 도구나 공유하고 싶은 경험이 있다면 아래 댓글에 추가해 주세요.

HTML과 CSS로 시작하기

우리의 웹 응용 프로그램은 PDF에 추가될 정보를 사용하여 이미 HTML 문서를 만들고 있을 것입니다. 인보이스의 경우 사용자는 온라인으로 정보를 본 다음 클릭하여 기록용 PDF를 다운로드할 수 있습니다. 포장 전표를 만들고 있을 수 있습니다. 다시 한 번, 정보는 이미 시스템 내에 보관되어 있습니다. 다운로드 및 인쇄를 위해 좋은 방식으로 형식을 지정하려고 합니다. 따라서 해당 HTML 및 CSS를 사용하여 PDF 버전을 생성할 수 있는지 고려하는 것이 좋은 출발점이 될 것입니다.

CSS에는 인쇄용 CSS를 다루는 사양이 있으며 이것이 Paged Media 모듈입니다. 내 기사 "Designing For Print With CSS"에 이 사양에 대한 개요가 있으며 CSS는 많은 책 출판사에서 모든 인쇄 출력에 사용합니다. 따라서 CSS 자체에 인쇄물에 대한 사양이 있으므로 당연히 사용할 수 있어야 하지 않을까요?

사용자가 PDF를 생성할 수 있는 가장 간단한 방법은 브라우저를 사용하는 것입니다. 프린터가 아닌 PDF로 인쇄하도록 선택하면 PDF가 생성됩니다. 슬프게도, 이 PDF는 일반적으로 완전히 만족스럽지 않습니다! 시작하려면 웹 페이지에서 무언가를 인쇄할 때 자동으로 추가되는 머리글과 바닥글이 있습니다. 또한 인쇄 스타일시트에 따라 형식이 지정됩니다.

여기서 우리가 직면한 문제는 브라우저에서 단편화 사양을 제대로 지원하지 않는다는 것입니다. 이는 페이지 콘텐츠가 비정상적으로 깨짐을 의미할 수 있습니다. "Css Fragmentation으로 상자 깨기"라는 기사를 조사했을 때 발견한 것처럼 단편화에 대한 지원은 고르지 못합니다. 즉, 헤더가 페이지의 마지막 항목으로 남아 있는 등의 방식으로 콘텐츠가 최적화되지 않은 중단을 방지할 수 없습니다.

또한 페이지 여백 상자의 내용을 제어할 수 있는 기능이 없습니다. 예를 들어 각 페이지에 선택한 헤더를 추가하거나 복잡한 송장의 페이지 수를 표시하기 위해 페이지 번호를 매깁니다. 이러한 것들은 Paged Media 사양의 일부이지만 어떤 브라우저에서도 구현되지 않았습니다.

내 기사 "2018년 인쇄 스타일시트 현황 가이드"는 인쇄 스타일시트를 사용하여 브라우저에서 직접 인쇄하기 위해 브라우저가 제공하는 지원 유형 측면에서 여전히 정확합니다.

점프 후 더! 아래에서 계속 읽기 ↓

브라우저 렌더링 엔진을 사용하여 인쇄하기

브라우저의 인쇄 메뉴를 거치지 않고 브라우저 렌더링 엔진을 사용하여 PDF로 인쇄하는 방법이 있으며 문서를 인쇄한 것처럼 머리글과 바닥글이 표시됩니다. 내 트윗에 대한 응답으로 가장 인기 있는 옵션은 wkhtmltopdf와 헤드리스 Chrome 및 Puppeteer를 사용하여 인쇄하는 것이었습니다.

wkhtmltopdf

Twitter에서 여러 번 언급된 솔루션은 wkhtmltopdf라는 명령줄 도구입니다. 이 도구는 스타일시트와 함께 HTML 파일 또는 여러 파일을 가져와 PDF로 변환합니다. WebKit 렌더링 엔진을 사용하여 이 작업을 수행합니다.

따라서 기본적으로 이 도구는 브라우저에서 인쇄하는 것과 동일한 작업을 수행하지만 자동으로 추가된 머리글과 바닥글을 얻지는 못합니다. 이 긍정적인 측면에서, 콘텐츠에 대해 작동하는 인쇄 스타일시트가 있는 경우 이 도구를 사용하여 PDF로 멋지게 출력해야 하므로 간단한 레이아웃이 매우 멋지게 인쇄될 수 있습니다.

그러나 불행하게도 여전히 브라우저 렌더링 엔진을 사용하여 인쇄하기 때문에 Paged Media 사양 및 조각화 속성에 대한 지원 부족 측면에서 웹 브라우저에서 직접 인쇄할 때와 동일한 문제에 직면하게 됩니다. Paged Media 사양을 사용하여 기본적으로 가질 수 있는 일부 누락된 기능을 다시 추가하기 위해 wkhtmltopdf에 전달할 수 있는 몇 가지 플래그가 있습니다. 그러나 이것은 좋은 HTML과 CSS를 작성하는 것 외에도 몇 가지 추가 작업이 필요합니다.

헤드리스 크롬

또 다른 흥미로운 가능성은 Headless Chrome 및 Puppeteer를 사용하여 PDF로 인쇄하는 것입니다.

그러나 다시 한 번 페이지 미디어 및 단편화에 대한 브라우저 지원으로 인해 제한을 받습니다. page.pdf() 함수에 전달할 수 있는 몇 가지 옵션이 있습니다. wkhtmltopdf와 마찬가지로 여기에는 브라우저 지원이 있는 경우 CSS에서 가능한 일부 기능이 추가됩니다.

이러한 솔루션 중 하나가 필요한 모든 작업을 수행할 수도 있지만 전투와 싸우고 있다는 사실을 알게 되면 현재 브라우저 렌더링 엔진으로 가능한 한계에 도달했을 가능성이 큽니다. 더 나은 솔루션을 찾아야 합니다.

페이지 미디어용 JavaScript 폴리필

기본적으로 페이지 미디어 폴리필을 생성하는 JavaScript를 사용하여 브라우저에서 페이지 미디어 사양을 본질적으로 재현하려는 몇 가지 시도가 있습니다. 이것은 Puppeteer를 사용할 때 Paged Media 지원을 제공할 수 있습니다. paged.js와 Vivliostyle을 살펴보십시오.

인쇄 사용자 에이전트 사용

HTML 및 CSS 솔루션을 계속 사용하려면 파일에서 PDF를 생성하기 위한 API가 있는 HTML 및 CSS에서 인쇄하도록 설계된 사용자 에이전트(UA)를 찾아야 합니다. 이러한 사용자 에이전트는 Paged Media 사양을 구현하고 CSS Fragmentation 속성을 훨씬 더 잘 지원합니다. 이렇게 하면 출력을 더 잘 제어할 수 있습니다. 주요 선택 사항은 다음과 같습니다.

  • 왕자
  • 안테나 하우스
  • PDF리액터

인쇄 UA는 웹 브라우저와 마찬가지로 CSS를 사용하여 문서의 서식을 지정합니다. CSS에 대한 브라우저 지원과 마찬가지로 이러한 UA의 문서를 확인하여 지원하는 항목을 확인해야 합니다. 예를 들어 내가 가장 잘 알고 있는 Prince는 Flexbox를 지원하지만 작성 당시 CSS Grid Layout은 지원하지 않습니다. 사용 중인 도구로 페이지를 보낼 때 일반적으로 인쇄용 특정 스타일시트와 함께 사용됩니다. 일반 인쇄 스타일시트와 마찬가지로 사이트에서 사용하는 CSS가 모두 PDF 버전에 적합한 것은 아닙니다.

이러한 도구에 대한 스타일시트를 만드는 것은 일반 인쇄 스타일시트를 만드는 것과 매우 유사하며, 아마도 다른 글꼴 크기나 색상을 사용하여 무엇을 표시하거나 숨길 것인지에 대한 종류의 결정을 내립니다. 그러면 페이지 미디어 사양의 기능을 활용하여 각주, 페이지 번호 등을 추가할 수 있습니다.

웹 응용 프로그램에서 이러한 도구를 사용하려면 서버에 도구를 설치해야 합니다(물론 라이센스를 구입한 경우). 이러한 도구의 주요 문제는 비용이 많이 든다는 것입니다. 즉, 인쇄된 문서를 쉽게 생성할 수 있기 때문에 개발자 시간을 절약할 수 있습니다.

DocRaptor라는 서비스를 통해 문서당 지불 방식으로 API를 통해 Prince를 사용할 수 있습니다. 이것은 많은 응용 프로그램을 시작하기에 좋은 장소가 될 것입니다. 마치 자체 호스팅이 더 비용 효율적이고 전환 개발 비용이 최소화되는 것처럼 보입니다.

위의 도구만큼 포괄적이지는 않지만 필요한 결과를 얻을 수 있는 무료 대안은 WeasyPrint입니다. 모든 Paged Media를 완전히 구현하지는 않지만 브라우저 엔진보다 더 많이 구현합니다. 확실히, 시도 할 것입니다!

HTML 및 CSS에서 변환을 지원한다고 주장하는 다른 도구에는 HTML5, CSS3 및 JavaScript를 지원한다고 과감하게 주장하는 PDFCrowd가 있습니다. 그러나 정확히 지원되는 내용과 Paged Media 사양이 지원되는지에 대한 세부 정보를 찾을 수 없습니다. 또한 내 트윗에 대한 응답에서 언급을 받은 것은 mPDF였습니다.

HTML과 CSS에서 벗어나기

HTML 및 CSS 사용에서 벗어나 도구에 대한 특정 출력을 생성해야 하는 다른 솔루션이 많이 있습니다. 몇 가지 JavaScript 경쟁자는 다음과 같습니다.

  • jsPDF
  • pdfmake

권장 사항

인쇄용 콘텐츠의 완전히 다른 표현을 생성해야 하는 JavaScript 기반 접근 방식 외에 이러한 솔루션 중 많은 부분은 상호 교환이 가능하다는 장점이 있습니다. 솔루션이 명령줄 도구를 호출하고 해당 도구를 HTML, CSS 및 일부 JavaScript로 전달하는 것을 기반으로 하는 경우 도구 간에 전환하는 것이 매우 간단합니다.

이 기사를 작성하는 과정에서 다양한 도구를 실행할 수 있는 Python 래퍼도 발견했습니다. (이미 도구 자체가 설치되어 있어야 하지만 샘플 문서에서 다양한 도구를 테스트하는 좋은 방법이 될 수 있습니다.)

Paged Media 및 단편화 지원을 위해 Prince, Antenna House 및 PDFReactor가 맨 위에 나올 것입니다. 상용 제품으로서 지원도 함께 제공됩니다. 예산이 있고 PDF로 인쇄할 복잡한 페이지가 있고 개발자 시간에 제한이 있는 경우 PDF 생성이 제대로 작동하도록 하는 가장 빠른 방법이 바로 이러한 방법일 것입니다.

그러나 많은 경우 무료 도구가 잘 작동합니다. 요구 사항이 매우 간단하다면 wkhtmltopdf 또는 기본 헤드리스 Chrome 및 Puppeteer 솔루션이 트릭을 수행할 수 있습니다. 그것은 확실히 내 원래 트윗에 답글을 달았던 많은 사람들에게 효과가 있는 것 같았습니다.

그러나 원하는 출력을 얻기 위해 고군분투하는 자신을 발견하면 브라우저 인쇄의 제한일 수 있으며 잘못한 것이 아니라는 점에 유의하십시오. Paged Media 지원을 더 원하지만 상용 제품을 구매할 수 없는 경우 WeasyPrint를 살펴보십시오.

이것이 웹 응용 프로그램에서 PDF를 만드는 데 사용할 수 있는 유용한 도구 모음이 되기를 바랍니다. 다른 것이 아니라면 초기 선택이 잘 작동하지 않는 경우 다양한 선택이 있음을 보여줍니다.

의견에 자신의 경험과 제안을 추가하십시오. 이것은 우리 중 많은 사람들이 결국 처리하게 되는 것 중 하나이며 공유된 개인적인 경험은 매우 도움이 될 수 있습니다.

추가 읽기

웹 응용 프로그램에서 PDF 파일 작업을 위한 기타 유용한 리소스와 함께 이 기사에서 언급한 다양한 리소스 및 도구 모음입니다.

명세서

  • 페이징된 미디어 모듈
  • 분열

기사 및 리소스

  • CSS로 인쇄용 디자인하기
  • CSS 단편화로 상자 깨기
  • 2018년 인쇄 스타일시트 현황 안내
  • Headless Chrome 및 Puppeteer 시작하기
  • print-css.rocks

도구

  • wkhtmltopdf
  • paged.js
  • 비블리오스타일
  • 왕자
  • 안테나 하우스
  • PDF리액터
  • 닥터랩터
  • 위지프린트
  • PDF크라우드
  • mPDF
  • jsPDF
  • pdfmake
  • 제작 및 게시 서버