동적 PDF v/s HTML을 PDF로

Question

저는 현재 의료 산업을위한 여러 대시 보드에서 작업 중입니다. 일반적인 요구 사항 중 하나는 그대로 화면에서 PDF를 생성하는 것입니다. 우리는 이러한 대시 보드에서 일반적인 CRUD 작업을 수행하지 않습니다. 일반적으로 많은 차트 (하이 차트 사용), 표 형식의 데이터, 아코디언 등이 포함됩니다. 모든 것은 페이지로드시 또는 사용자가 일부 차트 또는 HTML 요소를 클릭하면 발생하는 몇 가지 SELECT 문의 일부로 렌더링됩니다 .

나는 이것을 수행하는 방법을 찾고 있는데, 가장 잘 알려진 옵션은 서드 파티 라이브러리를 사용하여 HTML 자체에서 PDF를 생성하는 것이다. -4 줄의 코드.

다른 옵션은 동적 UI처럼 보이는 PDF를 생성하는 코드를 작성하는 것입니다. 브랜딩 및 스타일링을 고려해야하고 대시 보드 UI에서와 똑같이 보이는 차트를 생성하고 대시 보드의 UI처럼 테이블 형식의 데이터를 만들어야하기 때문에 훨씬 더 많은 노력이 필요합니다.

모든 대시 보드의 일반적인 UI 요구 사항은 모든 주요 브라우저를 지원하는 것입니다 - 9 forefox, 크롬, 사파리에서 시작 IE. iPads, iPhone 및 기타 가장 일반적인 기기의 3-4 버전을 지원합니다. 우리는 이러한 대시 보드에 사용

기술은 일부 JQuery와, HTML, CSS 및 asp.net 웹 API 2.0 각도이며, 어떤 경우에는 MVC를 ASP.NET.

나는 모든 대시 보드에 대한 PDF를 생성하는 위의 두 가지 방법의 장단점을 알아야합니다. 나는 이것이 거의 발견되지 않았다고 봤다. 누군가가 이것에 대한 통찰력을 공유하고 그들의 경험을 토대로 몇 가지 의견을 제시 할 수 있습니까?

Answer 1

당신이 무엇을 설명을 바탕으로, 당신은 적어도 2 믹스를 수행 할 수 있습니다. HTML-to-PDF 변환기를 사용할 수 있다면 개발 시간이 많이 절약되므로 항상 더 좋습니다. 그러나 UI에는 아코디언과 같은 요소가 있으므로 동적 정보를 정적 PDF로 표시하는 방법을 결정해야합니다. 에 "내보내기 PDF"버튼을 사용자가 클릭, 당신은 함수를 만들 수 있습니다 때

<my-accordion ng-if="!ExportingPDF"> ... accordion view for browser ...</my-accordion> 
<div ng-if="ExportingPDF"> ... expanded and slightly-modified view for PDF ... </div> 

:

그래서 내가 과거에 사용했던 하이브리드 접근 방식은이 같은 HTML을 마크 업 각도 사용하는 것입니다 그 (DOM을 업데이트하는 각도 시간을 제공하기 위해 짧은 $timeout 지연 시간 후)을 $scope.ExportingPDF = true을하고 다음 페이지에있는 모든 눈에 보이는 HTML을 잡고 있습니다.

ExportPDF 함수는 POST HTML을 서버 기반 HTML-to-PDF 코드 라이브러리가 HTML로 변환 한 다음 파일 다운로드 첨부 파일로 다시 브라우저로 보낼 서버로 HTML을 전달합니다.

예제 코드 :

$scope.ExportPDF = function() { 
    $scope.ExportingPDF = true; 
    $timeout(function() { 
     $ajax.post("/path/to/conversion-routine.abc", { data: $('html')[0].outerHTML } 
    }, 50); // short delay so Angular has time to update the DOM 
} 

이것은 당신이 각도의 능력과 기존 마크 업 여전히 정적 PDF 문서에 제대로 제시 조정하는 데 필요한 모든 이상한 작은 UI 물건을 취급하면서 활용할 수 있습니다.