Chart JS v3.4.x使用wkhtmltopdf导出PDF无法显示图表问题求助

失效原因 #

• wkhtmltopdf底层依赖老旧的QtWebKit内核，仅支持ES5及以下语法，不兼容ES6+的新语法特性
• ChartJS从3.x版本开始进行了全量重构，官方默认的构建产物使用了大量ES6+语法（包括let/const声明、箭头函数、Proxy代理等），在wkhtmltopdf的内核中运行时会直接抛出JS异常，无法完成图表初始化渲染；而2.9.4版本的构建产物完全兼容ES5，所以可以正常导出。

解决方案 #

方案1：使用ChartJS 3.x的ES5兼容构建包 #

ChartJS 3.x官方提供了专门适配旧环境的legacy构建版本，已经通过Babel转译为ES5语法，无需修改你的业务代码，只需将引入的ChartJS资源替换为chart.legacy.min.js即可，路径为chart.js/dist/chart.legacy.min.js。

方案2：调整wkhtmltopdf运行参数 #

添加JS执行相关的参数，确保图表渲染完成后再生成PDF，参考命令如下：

wkhtmltopdf --enable-javascript --javascript-delay 3000 --no-stop-slow-scripts http://localhost/pdf_test/index.html testpdf101.pdf

参数说明：

• --enable-javascript 强制开启JS执行
• --javascript-delay 3000 把JS执行后等待渲染的延迟从1000ms调整为3000ms，预留足够的渲染时间
• --no-stop-slow-scripts 禁止中断执行时间较长的JS脚本

方案3：图表预转为图片导出（兼容性最高） #

直接在页面逻辑中将渲染完成的ChartJS图表转为base64图片，再交给wkhtmltopdf渲染，完全规避JS兼容问题，修改后的配置参考：

const config = {
  type: 'bar',
  data,
  options: {
    animation: false,
    plugins: {
      afterRender: (chart) => {
        // 将canvas图表转为base64格式的图片
        const chartImg = document.createElement('img');
        chartImg.src = chart.toBase64Image();
        // 替换原canvas节点，也可以选择隐藏canvas、单独插入图片
        document.getElementById('myChart').replaceWith(chartImg);
      }
    },
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};

额外注意：canvas标签需要提前设置width、height属性，不要仅通过CSS设置尺寸，否则wkhtmltopdf可能识别不到canvas的渲染范围，导致输出空白。

内容的提问来源于stack exchange，提问作者Niloy Rony