2015-02-03 2 views
3

PhantomJS를 통해 html 파일을 PDF로 변환하려고하는데 dpi 스케일링 문제를 피하는 방법을 알 수 없습니다. <div style=" display:block; background-color:red; width:96px; "> text </div>과 같은 단순한 요소가 있습니다. 폭이 77px로 감소 했습니까? 내 viewPort 또는 paperSize의 값이이 값을 변경하지 않는 것 같습니다. 다른 곳에서 제안 된 zoomFactor1.25으로 조정할 수 있습니다.이 크기는 의도 한 너비로 조정되지만 페이지의 특정 요소는 엉망입니다.PhantomJS PDF DPI 스케일링 문제

나는 100 % 너비를 채우도록 설정된 HighCharts에 의해 생성 된 svg 차트가 있는데, 나는 또한 width: 210mm을 시도했지만이 크기는 210mm의 paperSize 너비와 일치하는 대신 축소됩니다. 96dpi에서의 A4는 794px x 1120px이고, 100 % 줌에서 PDF 뷰어를 통해 px 측정 결과입니다. (Windows에서의 PDF 이해는 96dpi로 표시됩니다.) 나는 width:100%으로 내 HighCharts div를 가져 와서 해당 PDF 크기를 취하여 viewPort에 대해 1.25, 992 x 1400 값을 곱하여 paperSize을 A4 세로로 설정하고 여백을 없앰으로써 PDF 너비와 일치하도록 렌더링 할 수있었습니다. 불행히도 축소되지 않은 나머지 콘텐츠는 조정되지 않습니다.

다른 옵션 중 하나는 A4 용지를 사용하지 않고 viewPort와 동일한 px 값을 제공하는 것입니다. 이는 A4 PDF가 예상되는보고 서비스 용 이었지만 일치하는 문서에 대해서도 축소되었습니다. 내용은 래스터 기반입니다. A4 크기를 채우거나 채울 수있는 방법이 있나요? 이상적으로 브라우저와 pdf 버전은 동일한 기계에서 시각적으로 비슷한 모양을 보일 것입니다 (PhantomJS는 Atom-Shell 응용 프로그램을 통해 사용됩니다). 이는 사용자에게 제공 될 수있는 일관된 경험이 아닐 수도 있습니다.

답변

1

수정 사항이있는 포크가 있습니다. 이 포크 지금 dpi로 설정할 수 있습니다 https://github.com/martonw/phantomjs/tree/issue-%2313553

당신이 위치에 phatomjs에 동일한 OS를 사용하십시오 당신은 당신의 OS를 위해 컴파일 할 필요가 다음이 page.dpi

console.log('Loading a web page'); 
var page = require('webpage').create(); 
var url = 'http://phantomjs.org/'; 
    page.open(url, function (status) { 
    //Page is loaded! 
    page.dpi=300; // this is where you actually set the DPI 
    page.render("test.pdf"); 
    phantom.exit(); 
} 

로 dpi로 설정할 수 있습니다 컴파일 프로세스는 시스템에서 dpi를 읽고 phantomjs에 사용하기 때문에 컴파일합니다. 즉, 표준 dpi 96으로 창에서 컴파일하고 centos에서 사용하는 경우 centos는 72 dpi를 사용하기 때문에 96/72의 배율을 갖습니다.

+0

거의 100 % 렌더링을 수정하는 방법이 있습니다. 몇 가지 글꼴 문제를 수정하십시오. 그것은 입력 너비/높이 조정 및 일부 CSS 변환 크기 조정과 관련이 있습니다.이 질문에 대해 잊어 버렸고 내 솔루션을 공유하고있는 것 같습니다 :) 이 버그는 Windows 용 2.0에서는 수정되었지만 비슷한 문제는 Linux/OSX에서 나타났습니다. 저는 github의 polarathene이고 광범위하게 주석을 달았습니다. 링크 된 포크는 비 - 윈도우 OS 인스턴스에 대한 확실한 수정입니다. :) – Brennan