如何提高PDF光栅化/ DPI质量？

Question

我使用PhantomJS打印包含多个元素（如文字和图表）的网页（在ChartJS中）。文本看起来很好，但图表和图像看起来很嘈杂和像素化。参见：

注意图表边框是如何像素化的。这必须是PhantomJS栅格化问题，但是找不到任何设置来提高生成的PDF或光栅化过程的质量。

我试过了：

使用page.dpi = 200;增加DPI。似乎没有任何效果。
使用page.property('dpi', 200);增加DPI。同样，没有效果。
像page.property('viewportSize', { width: 1920, height: 1080 });一样增加视口大小。增加屏幕尺寸，但质量保持不变。

这是我目前的剧本：

const phantom = require('phantom');
let url = "http://localhost:3000/";

phantom.create().then(function(ph) {
    ph.createPage().then(function(page) {
        page.property('viewportSize', { width: 1920, height: 1080 });
        page.property('dpi', 200); //No effect?
        page.dpi = 200; //No effect?
        page.property('paperSize', { format: 'Letter', orientation: 'portrait' });
        //page.property('zoomFactor', 3.5); //Works erratically

        page.open(url).then(function(status) {
            setTimeout(function () {
              page.render("output-" + Date.now() + ".pdf", { format: "pdf" }).then(function() {
                console.log('Page Rendered');
                ph.exit();
              });
            }, 3000); //Change timeout as required to allow sufficient time
        });
    });
});

如何提高PDF光栅化/ DPI质量？

Answer 1

我不熟悉PhantomJS。

我遇到了类似的问题，并通过设置包含图表

的容器的宽度和高度来解决

<div id="container" style="width: 1920px; height: 1080px;">
    <canvas id="canvas"></canvas>
</div>

我还添加了一个不含源的隐形图像标记

<img src="" alt="Chart" id="chartImg" style="display: none;"/>

并注册了一个插件

Chart.plugins.register({
    id: 'charttoimg',
    beforeRender: function(chart, options) {
        document.getElementById('container').style.width='1920px';
        document.getElementById('container').style.height='1080px';
    },
    afterRender: function(chart, options) {
        document.getElementById('chartImg').src=chart.chart.canvas.toDataURL('image/png');
        document.getElementById('container').style.width='75%';
        document.getElementById('container').style.height='';
    }
});

使用以下方法我捕获了打印事件以在打印前后切换图像和容器

(function() {
    var beforePrint = function() {
        document.getElementById('container').style.display='none';
        document.getElementById('chartImg').style.display='inline';
    };
    var afterPrint = function() {
        document.getElementById('chartImg').style.display='none';
        document.getElementById('container').style.display='block';
    };
    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }
    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

Answer 2

现在在 2021 年，Chart.js 有参数“devicePixelRatio”来提高质量。就我而言，我将该值设置为 1.5 以获得也适合使用 PDF 打印的高分辨率。

options:{
      devicePixelRatio: 1.5
}

文档：https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html

如何提高PhantomJS中的PDF光栅化质量？

如何提高PDF光栅化/ DPI质量？

2 个答案: