Проблемы с масштабированием PhantomJS PDF DPI

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

У меня есть диаграмма svg, сгенерированная HighCharts, которая настроена на заполнение 100% ширины, я также пробовал width: 210mm, но она будет уменьшена вместо того, чтобы соответствовать ширине paperSize 210 мм. Я знаю, что A4 с разрешением 96 точек на дюйм должен быть 794 x 1120 пикселей, а через средство просмотра PDF при 100% увеличении это измерения в пикселях (насколько я понимаю, PDF-файлы в окнах отображаются с разрешением 96 точек на дюйм). Я смог заставить свой div HighCharts с width:100% отображать, как предполагалось, в соответствии с шириной PDF-файлов, взяв эти размеры в пикселях и умножив их на 1,25, 992 x 1400 значений для viewPort с paperSize, установленным на A4 портрет и без полей. К сожалению, это не регулирует остальную часть контента, который уменьшается в масштабе.

Еще один вариант заключался в том, чтобы избежать формата бумаги A4 и предоставить те же значения пикселей, что и для 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 со стандартным разрешением 96 точек на дюйм и используете его в Centos, у вас будет масштаб 96/72, потому что Centos использует 72 точки на дюйм.

person mapodev    schedule 06.10.2015
comment
В итоге у меня появился способ исправить рендеринг почти на 100%, за исключением некоторых проблем со шрифтами. Это включало настройку ширины / высоты ввода и некоторое масштабирование преобразования CSS, я думаю, я забыл об этом вопросе и поделился своим решением :) Эта ошибка была исправлена ​​​​в версии 2.0 для Windows, но похожая появилась для Linux / OSX, я m polarathene на github и подробно прокомментировал его. Форк, на который вы ссылаетесь, наверняка является правильным исправлением для экземпляров ОС, отличных от Windows :) - person Brennan; 07.10.2015

arrow_upward
0
arrow_downward

Да, ›2.0 имеет плохо определенный А4. Я масштабирую свой 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