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

最近一直在头疼生成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>