图表 JS 版本 3 未在引擎 wkhtmltopdf 的 pdf 中显示答案

【问题标题】：Chart JS version 3 not showing in pdf for engine wkhtmltopdf图表 JS 版本 3 未在引擎 wkhtmltopdf 的 pdf 中显示
【发布时间】：2023-03-21 04:19:01
【问题描述】：

我正在尝试使用 wkhtmltopdf 生成 PDF，其中有图表 js。图表js版本3.4.x

我在下面写了html来生成图表

你好

js代码：

<script type="text/javascript">

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};

const config = {
  type: 'bar',
  data,
  options: {
     animation: false,
        scales: {
            x: {
                grid: {
                tickColor: 'red'
                },
                ticks: {
                color: 'blue',
                }
            }
        }
  }
};

var myChart = new Chart(
    document.getElementById('myChart').getContext('2d'),
    config
);

</script>

图表在 html 中运行良好

下达命令后

wkhtmltopdf --javascript-delay 1000 http://localhost/pdf_test/index.html testpdf101

我得到了段落但没有图表。我测试了版本图表 js 2.9.4 的相同程序，它工作正常。为什么它在版本 3 中不起作用？如何为图表 js 版本 3.4.x 生成 pdf？

【问题讨论】：

尝试使用任何画布并检查画布是否呈现在 pdf 中。也许 wktmltopdf 不支持画布。如果是这样，请尝试将 chartJS 转换为图像，可能使用 Chart js docs 中指定的 Chart.toBase64Image()。如果您需要知道如何在 html 中呈现 base64 图像，请查看post

标签： javascript chart.js wkhtmltopdf

【解决方案1】：

在使用另一个 pdf 工具 (hiqpdf) 时遇到了同样的问题，这些工具使用的引擎似乎支持与 Internet Explorer 11 相同的 JavaScript/jquery 版本。当您在 IE11 中检查您的页面时，您可能会看到与 chart.js 相关的语法错误，因为 chart.js 不再支持 ie11，他们似乎使用了无法在 pdf 渲染工具中使用的语法。我为此苦苦挣扎整整一周，最后选择使用 2.9 版本的 chart.js，使用 v3 向后迁移 guid……2.9 与 pdf 生成工具结合起来似乎一切正常，所以可能是你最快的解决方案？

【讨论】：

这似乎更像是一种思路，而不是真正的答案——您应该在此处提供一些示例。也许提到“polyfills”的存在是为了桥接对旧浏览器的支持并提供一个链接。如果您成功使用 2.9，包括一些有关如何向后移植到此版本的附加信息会更有帮助。