Javascript KNPLAB/snappy捆绑包（wkhtmltopdf）不呈现Chart.js图表

我试图用

Chart.js

库生成的图表生成

PDF

但是javascript根本不呈现

你看到我错过的东西了吗

   # config/packages/knp_snappy.yaml
    knp_snappy:
        pdf:
            enabled:    true
            binary:     '%env(WKHTMLTOPDF_PATH)%'
            options:
              debug-javascript: true
              enable-javascript: true
              javascript-delay: 200
              no-stop-slow-scripts: true

        image:
            enabled:    true
            binary:     '%env(WKHTMLTOIMAGE_PATH)%'
            options:    []

PHP符号部分

    /**
     * Download pdf.
     *
     * @param string $slug
     * @param string $language
     *
     * @return Response
     *
     * @throws \Psr\Cache\CacheException
     * @throws \Psr\Cache\InvalidArgumentException
     */
    public function __invoke(string $slug, string $language): Response
    {
            $this->pdfFilesService->setPdfLanguage($language);
            $base64Images = $this->pdfFilesService->getBase64Images($slug);
            $profile      = $this->profileData->execute($slug, $language);
            $filename     = $profile['name'].'-report.pdf';
            $path         = $this->parameterBag->get('app.private_pdf_storage').'/'.$filename;

            $html = $this->templating->render('download_pdf.twig', \array_merge($base64Images, [
                'profile'     => $profile,
                'language'    => $language,
            ]));


            $this->pdf->generateFromHtml([$html], $path, [], true);

            return new Response(
                $path,
                200,
                [
                    'Content-Type'        => 'application/pdf',
                    'Content-Disposition' => 'inline; filename="'.$path.'"',
                ]
            );

    }

小树枝

   <section>
       <div id="barMulti"></div>
   </section>
   <script type="text/javascript" src="{{ chartJs }}"></script>
   <script type="text/javascript">
      function getDataMulti(type) {
         return {
            // The type of chart we want to create
            type,

            // The data for our dataset
            data: {
               labels: [ ... ],
               datasets: [
                  {
                     backgroundColor: "#F4F7F9",
                     data: [3,7,4,5,5,2,6,8,9,7]
                  },
                  {
                     backgroundColor: "#66C4E0",
                     data: [3,7,4,5,5,2,6,8,9,7]
                  },
                  {
                     backgroundColor: "#009DCD",
                     data: [3,7,4,5,5,2,6,8,9,7]
                  },
               ]
            },

            // Configuration options go here
            options: {
               legend: {
                  display: false,
               },
               animation: {
                  duration: 0
               },
               scales: {
                  yAxes: [{
                     gridLines: {
                        color: "#454D57",
                     },
                     ticks: {
                        padding: 20,
                        fontStyle: 'bold',
                        fontColor: '#F4F7F9',
                        min: 0,
                        max: 100,
                     }
                  }],
                  xAxes: [
                     {
                        gridLines: {
                           color: "#454D57"
                        },
                        ticks: {
                           fontStyle: 'bold',
                           fontColor: '#F4F7F9',
                           padding: 20,
                           callback: function(label) {
                              if (/\s/.test(label)) {
                                 return label.split(" ");
                              }

                              return label;
                           }
                        }
                     }
                  ]
               }
            }
         }
      }

      // var barMulti = document.getElementById('barMulti');
      var barMulti = document.getElementById('barMulti');
      new Chart(barMulti, getDataMulti('bar'));
   </script>

函数getDataMulti（类型）{
返回{
//我们要创建的图表类型
类型，
//我们的数据集的数据
数据：{
标签：[……]，
数据集：[
{
背景颜色：“F4F7F9”，
数据：[3,7,4,5,5,2,6,8,9,7]
},
{
背景色：“66C4E0”，
数据：[3,7,4,5,5,2,6,8,9,7]
},
{
背景颜色：“009DCD”，
数据：[3,7,4,5,5,2,6,8,9,7]
},
]
},
//配置选项在这里
选项：{
图例：{
显示：假，
},
动画：{
持续时间：0
},
比例：{
雅克斯：[{
网格线：{
颜色：“454D57”，
},
滴答声：{
填充：20，
字体：“粗体”，
fontColor:“#F4F7F9”，
分:0,，
最高：100，
}
}],
xAxes：[
{
网格线：{
颜色：“454D57”
},
滴答声：{
字体：“粗体”，
fontColor:“#F4F7F9”，
填充：20，
回调：函数（标签）{
如果（/\s/.test（标签））{
返回标签。拆分（“”）；
}
退货标签；
}
}
}
]
}
}
}
}
//var barMulti=document.getElementById（'barMulti'）；
var barMulti=document.getElementById（'barMulti'）；
新图表（barMulti，getDataMulti（'bar'））；

wkhtmltopdf

不是一个完美的库，但它是开源的和免费的 使用，因此我们需要心存感激，并尝试帮助其使用或 通过贡献来提高

作为第一步，您需要测试HTML/TWIG模板是否可以使用Javascript

<script>
  document.body.innerHTML = "Testing JavaScript PDF Rendering"
</script>

确定Javascript在

wkhtmltopdf

最重要的事情。您需要使用

样式化的
div

 <div class="reportGraph">
     <canvas id="barMulti"></canvas>
 </div>

或者可以通过内联css设置画布容器的样式

然后在包含
chart.js
库之后添加此脚本文件

<script>
  // wkhtmltopdf 0.12.5 crash fix.
  // https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3242#issuecomment-518099192
  'use strict';
  (function(setLineDash) {
    CanvasRenderingContext2D.prototype.setLineDash = function() {
      if(!arguments[0].length){
        arguments[0] = [1,0];
      }
      // Now, call the original method
      return setLineDash.apply(this, arguments);
    };
  })(CanvasRenderingContext2D.prototype.setLineDash);
  Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
      return fn.apply(thisp, arguments);
    };
  };
</script>

我想你已经安装了
wkhtmltopdf
了，是吗？是的，wkhtmltopdf已经安装。生成PDF。我设法运行javascript，只有chartjs没有呈现。这段代码过去对我有用，但现在我得到了“'undefined'不是我的图形应该是的对象×”。有什么想法吗？如果我直接呈现html，我会显示图形。问题在于仅使用wkhtmltopdf显示
   .reportGraph {
      width:850px
   }

<script>
  // wkhtmltopdf 0.12.5 crash fix.
  // https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3242#issuecomment-518099192
  'use strict';
  (function(setLineDash) {
    CanvasRenderingContext2D.prototype.setLineDash = function() {
      if(!arguments[0].length){
        arguments[0] = [1,0];
      }
      // Now, call the original method
      return setLineDash.apply(this, arguments);
    };
  })(CanvasRenderingContext2D.prototype.setLineDash);
  Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
      return fn.apply(thisp, arguments);
    };
  };
</script>

<script>
function drawGraphs() {
    new Chart(
        document.getElementById("canvas"), {
            "responsive": false,
            "type":"line",
            "data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"borderColor":"rgb(75, 192, 192)","lineTension":0.1}]},
            "options":{}
        }
    );
}
window.onload = function() {
    drawGraphs();
};
</script>