Garbled Texte dans AmCharts Exporter au format PDF

Question

J'essaie d'utiliser le Javascript pour exporter les amCharts au format PDF en suivant

[Codepen](https://codepen.io/team/amcharts/pen/35076c4d7b6eef7764dacc61f72adadc) 

les étapes de ce site Web, mais le PDF a le texte indéchiffrable (mots chinois), je veux utiliser UTF -8, comment puis-je le réparer? Et pourquoi le degré de résolution du graphique est si bas? Merci. enter image description here

html

<h2 id="OPASS" class="display-5 col-md-offset-4 col-md-12">測試圖表</h2> 

javascript

var downloadPDF = function() { 
      console.log("Starting export..."); 
      var ids = ["chartdiv", "Passion_chart", "Anchor_chart", "Switch_chart", "Synergy_chart"]; 
      var charts = {}, charts_remaining = ids.length; 
      for (var i = 0; i < ids.length; i++) { 
       for (var x = 0; x < AmCharts.charts.length; x++) { 
        if (AmCharts.charts[x].div.id == ids[i]) 
         charts[ids[i]] = AmCharts.charts[x]; 
       } 
      } 
      for (var x in charts) { 
       if (charts.hasOwnProperty(x)) { 
        var chart = charts[x]; 
        chart["export"].capture({}, function() { 
         this.toJPG({}, function(data) { 
          // Save chart data into chart object itself 
          this.setup.chart.exportedImage = data; 
          // Reduce the remaining counter 
          charts_remaining--; 
          // Check if we got all of the charts 
          if (charts_remaining == 0) { 
           // Yup, we got all of them 
           // Let's proceed to putting PDF together 
           generatePDF(); 
          } 
         }); 
        }); 
       } 
      } 
      function generatePDF() { 
       // Log 
       console.log("Generating PDF..."); 
       // Initiliaze a PDF layout 
       var layout = { 
        "content": [] 
       }; 
       // Let's add a custom title 
       layout.content.push({ 
        "text": document.getElementById("OPASS").innerHTML, 
        "fontSize": 24 
       }); 
       // Now let's grab actual content from our <p> intro tag 
       layout.content.push({ 
        "text": document.getElementById("intro").innerHTML 
       }); 
       // Add bigger chart 
       layout.content.push({ 
        "image": charts["chartdiv"].exportedImage, 
        "fit": [523, 300] 
       }); 
       chart["export"].toPDF(layout, function(data) { 
       this.download(data, "application/pdf","amCharts.pdf"); 
      }); 
     } 
    } 

Answer 1

PDFMake, la bibliothèque AmCharts tire parti pour l'exportation PDF, ne supporte pas le chinois hors de la boîte avec la police par défaut Roboto qu'il utilise (il y a des tonnes de questions à ce sujet dans le suivi des problèmes, tels que this one). Vous devez créer un fichier vfs_fonts.js personnalisé avec une police qui a des caractères chinois et l'utiliser à la place du fichier de police fourni en utilisant le step by step tutorial fourni par les développeurs de pdfmake. "Microsoft YaHei" semble être recommandé par les problèmes de github que j'ai examinés. Une fois que vous avez créé votre fichier de police personnalisé, vous devez inclure manuellement pdfMake.js dans votre page, ainsi que votre fichier vfs_fonts.js personnalisé, puis une référence à window.pdfMake.fonts sinon il sait utiliser au lieu de la police par défaut Roboto.

<script src="./amcharts/plugins/export/libs/pdfMake/pdfMake.js" type="text/javascript"></script> 
<script src="vfs_fonts.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    pdfMake.fonts = { 
     "Microsoft Yahei": { 
      "normal": 'name of font.tff', //replace with the name of the ttf font file 
      "bold": 'name of bold font.ttf', 
      "italics": 'name of italics font.ttf', 
      "bolditalics": 'name of bold italics font.ttf' 
     } 
    } 
    // ... 

AmCharts.makeChart({ 
    "export": { 
     "enabled": true, 
     "pdfMake": { 
      defaultStyle: { 
       font: "Microsoft YaHei" 
      } 
     }, 
    }, 
    ... 
}); 
</script>