2016-07-04 3 views
0

내가 작업중인 제품에는 HTML5 대시 보드에 좋은 그래프가 있습니다. 그래프는 Flot을 사용하여 Javascript로 렌더링됩니다.서버의 렌더링 클라이언트 측 차트

사용자는 정해진 일정에 따라이 Dashboard를 매일 이메일로 PDF 보고서로 보내고 싶습니다. 따라서 예를 들어 이메일을 보내려면 매일 오전 8시에 이메일을 보내야합니다.

은 내가 사용하는 생각했습니다 파이썬의 Requests (즉 않는 request.get)이 페이지의 HTML5 소스를 가져온 다음 Weasyprint를 사용하여 PDF로 결과 HTML5 페이지를 변환 그러나 이것은 분명히 작동하지 않을합니다.

Javascript 차트는 괜찮은 Javascript 지원이있는 브라우저에서 보지 않는 한 렌더링되지 않으므로 가장 큰 골칫거리입니다. 따라서이 방법은 Javascript 그래프를 렌더링하지 않습니다.

동적으로 생성 된 HTML5 페이지를 PDF로 변환하는 권장 방법은 무엇입니까? 다른 사람들은 어떻게 이것을합니까?

+0

당신은 그것 때문에 작동하지 않을 것이 – anu

+0

을 달성하기 위해 [toDataUrl()] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) 방법을 사용할 수 있습니다 Canvas를 렌더링하고 Javascript를 지원하는 서버 측에 뭔가가 필요합니다. – CadentOrange

+0

이 방법을 사용하여 캔버스를 이미지 데이터로 변환하여 서버에 전송할 수 있습니다. 그런 다음 서버 측에서 임의의 pdf 라이브러리를 사용하십시오. [iText] (http://itextpdf.com/)는이 이미지가 포함 된 pdf 파일을 생성합니다. 이 pdf를 메일이나 기타로 보내려면 – anu

답변

2

PhantomJS이 해결책입니다. Javascript 그래프와 함께 대시 보드를 PDF로 렌더링 할 수있는 헤드없는 WebKit 구현입니다.

이제 대시 보드를 사용자에게 이메일로 전송되는 PDF 문서로 변환하는 일괄 작업을 설정했습니다.

일부 다른 것들

부록 오프 알고 있어야합니다. PhantomJS의 현재 2.1 빌드에는 PDF로 렌더링하는 버그가 있습니다. 수정 프로그램은 2.2로 예정되어 있습니다. bug report에 설명 된 임시 해결 방법은 문서의 CSS 확대/축소 수준을 설정하는 것입니다. 다음 CSS 조각은 나를 위해 작동합니다.

html { 
    zoom: 50%; 
} 
관련 문제