chart.js - Chart.js 不适用于 PDF 的 Pug 和 Node

Question

我正在尝试使用Chart.js,和在 PDF 文件中创建折线图Node，但它不起作用。PugHeadless chrome (html-pdf-chrome)

呈现的 HTML 直接在浏览器中工作，但生成的 PDF 是空白的。添加超时与 completionTrigger 没有区别。

我想知道是否有可能做到这一点，如果可以，我哪里出错了？

节点文件：

const pug = require('pug');
const htmlPdf = require('html-pdf-chrome');

async function createPDF() {
    const html = pug.renderFile('template.pug', {})
    const options = {
        port: 9222,
        completionTrigger: new htmlPdf.CompletionTrigger.Timer(5000),
    };

    htmlPdf.create(html, options).then((pdf) => pdf.toFile('output.pdf'));
}

createPDF(); 

帕格模板：

doctype html
html
    head
        meta(charset="utf-8")
        title test
        script(type="text/javascript", src='chart.js')//chart.js lib
        script(type="text/javascript", src='scripts.js')

    body
        canvas#myChart(width='200' height='100' style='border:1px solid #000000;')

脚本文件：

window.onload = function () {
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45]
            }]
        },
        options: {}
    });
};

标签： chart.jspuggoogle-chrome-headless