我尝试使用PDF库生成的图表生成Chart.js 但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 Symfony部分

    /**
     * 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,2,6,8,9,7]
                  },{
                     backgroundColor: "#66C4E0",{
                     backgroundColor: "#009DCD",]
            },// 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',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>