使用wkhtmltopdf的window-status参数解决生成的pdf中echarts图不完整问题

最近一直在头疼生成 pdf 报告的问题，一个页面几个至几十个数量不等 echarts 图，后面的 echarts 图在生成的 pdf 中有些时候只有部分图形，即使是在页面上有时浏览器黑屏，感觉快崩溃了。使用了 --javascript-delay 30000 仍然无法解决图不完整的问题。

然后反复看了 wkhtmltopdf 的文档，看到 --window-status 这个参数，似乎可以满足等所有的图画完再生成 pdf 的需求

--window-status <windowStatus>  Wait until window.status is equal to this  string before rendering page

demo 如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./public/plugins/echarts.min.js"></script>
  </head>
  <body>
    <div id="main1" style="height: 400px; width: 1200px"></div>
    <div id="main2" style="height: 400px; width: 1200px"></div>
    <script>
      var chart_status = { main1: 0, main2: 0 };
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      myChart.on("finished", function () {
        chart_status["main1"] = 1;
      });
      option && myChart.setOption(option);
    </script>
    <script>
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom, null, { renderer: "svg" });
      var option;

      option = {
        animation: false,
        grid: [
          {
            bottom: 0,
            height: 120,
            top: 150,
          },
          {
            bottom: 0,
            height: 120,
            top: 150,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: ["aa", "bb"],
          },
          {
            type: "category",
            gridIndex: 1,
            show: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 0.05,
          },
          {
            type: "value",
            gridIndex: 1,
            position: "right",
            show: false,
            min: 0,
            max: 0.05,
          },
        ],
        series: [
          {
            data: [
              [0, 0.0155, 0.0213, 0.0271, 0.0445],
              [0, 0.0152, 0.021, 0.027, 0.0447],
            ],
            type: "boxplot",
            boxWidth: ["90%", "98%"],
            itemStyle: {
              borderWidth: 2,
            },
          },
          {
            data: [
              ["aa1", 0.0158],
              ["aa2", 0.0142],
              ["aa3", 0.024],
              ["bb1", 0.022],
              ["bb2", 0.018],
              ["bb3", 0.035],
            ],
            type: "scatter",
            xAxisIndex: 1,
            yAxisIndex: 1,
          },
        ],
      };

      myChart.on("finished", function () {
        chart_status["main2"] = 1;
      });

      option && myChart.setOption(option);
    </script>

    <script>
      var timer = setInterval(function () {
        var flag = true;
        for (var key in chart_status) {
          if (chart_status[key] == 0) {
            flag = false;
            break;
          }
        }
        if (flag) {
          clearInterval(timer);
          window.status = "ready";
          console.log(window.status);
        }
      }, 1000);
      console.log("dom rendered");
    </script>
  </body>
</html>

希望可以解决以上的问题，看看后续的效果再更新。

顺便记录下生成 pdf 的 echart 图和页面不同的地方：

  • 显示 echarts 的 div 要设置一个高度和宽度，注意都要设置。浏览器不设置宽度能看到图，但是生成 pdf 不行。
  • animation: false
  • 不能使用 let、const、 ()=>{} 等 ES6 语法，否则报错

后面更新：以上解决方案确实解决了 pdf 中 echarts 图不完整的问题，令人头疼的问题终于消失了。

posted @ 2023-06-07 17:18  carol2014  阅读(910)  评论(0)    收藏  举报