Проблеми с мащабирането на PhantomJS PDF DPI

Опитвам се да конвертирам html файл в PDF чрез PhantomJS и не мога да разбера как да избегна проблемите с мащабирането на dpi. Просто имайки толкова прост елемент като <div style=" display:block; background-color:red; width:96px; "> text </div> Ширината му е намалена до 77px. Стойностите на моите viewPort или paperSize изглежда не променят това. Мога да коригирам zoomFactor на 1,25, което беше предложено другаде, това се мащабира приблизително до предвидената ширина, но обърква някои елементи в страницата.

Имам svg диаграма, генерирана от HighCharts, която е настроена да запълва 100% ширина, опитах също width: 210mm, но това ще бъде намалено, вместо да съответства на ширина на paperSize от 210 mm. Знам, че A4 при 96dpi трябва да бъде 794px x 1120px, а чрез програмата за преглед на PDF при 100% увеличение това са измерванията в px (доколкото разбирам PDF файловете в Windows се показват при 96dpi). Успях да накарам своя div HighCharts с width:100% да се изобрази по предназначение, съответствайки на ширината на PDF файловете, като взех тези размери на px и умножих по 1,25, 992 x 1400 стойности за viewPort с paperSize, зададен на A4 портрет и без поле. За съжаление това не коригира останалата част от съдържанието, което се намалява.

Една друга опция беше да се избегне размерът на хартията A4 и да се осигурят същите стойности на px като viewPort, те също са намалени за съответстващ документ, въпреки че това беше предназначено за услуга за отчитане, където се очакваше A4 PDF... Тъй като нищо от съдържанието не е растерно въз основа на това има ли начин да повиша мащаба на това, за да запълня/побера размерите на A4 PDF? В идеалния случай браузърът и pdf версиите ще изглеждат сходни по размер визуално на една и съща машина (PhantomJS се използва чрез приложението Atom-Shell), може би това не е последователно изживяване, което може да се предостави на потребителите?


pdf highcharts pdf-generation phantomjs dpi
person Brennan    schedule 03.02.2015    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Има вилица с корекция за това. Можете да зададете dpi сега с това разклонение: https://github.com/martonw/phantomjs/tree/issue-%2313553

Трябва да го компилирате за вашата операционна система и след това можете да зададете dpi с 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();
}

Уверете се, че използвате същата операционна система за phatomjs там, където го компилирате, защото процесът на компилиране чете dpi от системата и го използва за phantomjs. Това означава: Ако го компилирате на windows със стандартен dpi 96 и го използвате на centos, ще имате скала 96/72, защото centos използва 72 dpi

person mapodev    schedule 06.10.2015
comment
В крайна сметка имах начин да коригирам изобразяването, за да бъде почти 100% правилно, без някои проблеми с шрифта. Включваше коригиране на ширината/височината на входа и малко мащабиране на CSS трансформация, предполагам, че забравих за този въпрос и да споделя моето решение :) Тази грешка беше коригирана във 2.0 за Windows, но се появи подобна за Linux/OSX, аз m polarathene в github и са го коментирали обстойно. Разклонението, към което сте се свързали, със сигурност е правилната корекция за екземпляри на OS, различни от Windows :) - person Brennan; 07.10.2015

arrow_upward
0
arrow_downward

Да, ›2.0 има лошо дефиниран A4. Мащабирам моя html, като коригирам css стила от rasterize.js точно преди командата .render.

page.evaluate(function () {
    var the_page = document.getElementsByTagName("page")[0];
    the_page.style.transformOrigin='0 0';
    the_page.style.WebkitTransformOrigin='0 0';
    the_page.style.transform='scale(1.28)';
    the_page.style.webkitTransform ='scale(1.28)';
);
person jonincanada    schedule 29.01.2021