Блог

Поэтому я в основном динамически генерирую гигантский SVG и показываю его на экране. Мне нужно предоставить возможность печати в формате PDF. Сынок как только SVG появится на экране, одним нажатием кнопки я сделаю это:

 function printReportAsPDF(W,H){

   var svg = document.getElementById("report-svg");   
   var svgData = new XMLSerializer().serializeToString( svg );

   //console.log(svgData)

   var canvas = document.createElement("canvas");
   canvas.width = W;
   canvas.height = H;
   var ctx = canvas.getContext("2d");

   // Internally display the image. 
   var img = document.createElement( "img" );

   //console.log(btoa(svgData));
    
   img.setAttribute( "src", "data:image/svg xml;base64,"   btoa( svgData ) );
   
   img.onload = function() {
      console.log("onload");
      ctx.drawImage( img, 0, 0 );
      var imgData = canvas.toDataURL('image/png');
      let doc = new jsPDF();
      var PAGE_WIDTH  = doc.internal.pageSize.getWidth();
      var PAGE_HEIGHT = doc.internal.pageSize.getHeight();      
      console.log("done");
      doc.addImage(imgData, 'PNG', 0, 0, PAGE_WIDTH, PAGE_HEIGHT,"","FAST");
      doc.save("report.pdf");  
   };   

   img.onerror = function() {
      console.log("There was an error loading the image");
   }
}
 

Моя проблема в том, что, несмотря на то, что btoa, похоже, работает нормально, а svgData не равна нулю, и все, что я получаю, вызывается ошибка, а не вызывается загрузка.

Как я могу узнать, в чем здесь проблема?