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

我用它来打印一个网页，包括一些元素，如文本和图表（在ChartJS中）。文本看起来很好，但图表和图像看起来很嘈杂和像素化。见：

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

我试过：

• 使用

  page增加DPI.DPI=200。似乎没有任何效果

• 使用

  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质量？我不熟悉PhantomJS

我有一个类似的问题，通过设置包含图表的容器的宽度和高度来解决

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

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

(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;
}());

---

现在，在2021年，Chart.js具有参数“devicePixelRatio”以提高质量。 在我的例子中，我将该值设置为1.5，以获得同样适用于PDF打印的高分辨率

options:{
      devicePixelRatio: 1.5
}

文件：

(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;
}());

options:{
      devicePixelRatio: 1.5
}