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

Question

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

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

Answer 1

Существует вилка с исправлением для этого. Вы можете установить на дюйм теперь с этой вилкой: https://github.com/martonw/phantomjs/tree/issue-%2313553

Вы должны собрать его для вашей операционной системы, а затем вы можете установить ДОИ 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. Это означает: если вы скомпилируете его на окнах со стандартным разрешением dpi 96 и используете его на centos, у вас будет шкала 96/72, потому что centos использует 72 dpi