在PDF文件中更改字體由AmCharts

我有一些困難，導航AmCharts文檔導出。我似乎遇到的主要問題是在通過導出創建PDF文件時找到有關更改默認字體的信息，該導出內置於授權的AmCharts 3.20.3版中。我希望它是Open Sans而不是Roboto（pdfMake默認）。在PDF文件中更改字體由AmCharts

export : { 
       enabled : true, 
       drawing : { 
        menu : [{ 
         class : 'export-drawing', 
         menu : [{ 
          label : translations['ADD'] + ' ...', 
          menu : [{ 
           label : translations['PDF_ANNOTATE_SHAPE'] +' ...', 
           action : 'draw.shapes' 
          }, { 
           label : translations['PDF_ANNOTATE_TEXT'], 
           action : 'text' 
          }] 
         }, { 
          label : translations['PDF_ANNOTATE_CHANGE'] + ' ...', 
          menu : [{ 
           label : translations['PDF_ANNOTATE_MODE'] + ' ...', 
           action : 'draw.modes' 
          }, { 
           label : translations['PDF_ANNOTATE_COLOR'] + ' ...', 
           action : 'draw.colors' 
          }, { 
           label : translations['PDF_ANNOTATE_SIZE'] + ' ...', 
           action : 'draw.widths' 
          }, { 
           label : translations['PDF_ANNOTATE_OPACITY'] + ' ...', 
           action : 'draw.opacities' 
          }, 'UNDO', 'REDO'] 
         }, { 
          label : translations['PDF_EXPORT'], 
          format : 'PDF', 
          fileName : translations['MY_TEAM_PS'], 
          content : [ 
           { 
            image : 'reference', 
            alignment : 'center', 
            fit : [769.89, 523.28] // fit image to A4 
           }, 
           reportDataTable 
          ], 
          pageOrientation : 'landscape', 
          styles : { 
           tableHeader : { 
            fontSize : 8, 
            bold : true 
           }, 
           subheader : { 
            fontSize : 12, 
            bold : true 
           }, 
           tableCell : { 
            fontSize : 8, 
            bold : false 
           }, 
           quote : { 
            italics : true 
           }, 
           small : { 
            fontSize : 8 
           } 
          } 
         }, 'CANCEL'] 
        }] 
       },

他們的文件似乎表明，我僅僅能夠添加pdfMake：{}只是內部的出口，然後做什麼，我需要做的還有更改字體。基於對pdfMake的文件上，它看起來像我需要沿着這行做一些事情：

export : { 
       pdfMake : { 
        fonts : { 
         OpenSans : { 
          normal : 'OpenSans-Regular.ttf', 
          bold : 'OpenSans-Semibold.ttf', 
          italics : 'OpenSans-Italic.ttf', 
          bolditalics : 'OpenSans-BoldItalic.ttf' 
         } 
        } 
       }, 
       enabled : true, 
       drawing : { 
        menu : [{ 
         class : 'export-drawing', 
         menu : [{ 
          label : translations['ADD'] + ' ...', 
          menu : [{ 
           label : translations['PDF_ANNOTATE_SHAPE'] +' ...', 
           action : 'draw.shapes' 
          }, { 
           label : translations['PDF_ANNOTATE_TEXT'], 
           action : 'text' 
          }] 
         }, { 
          label : translations['PDF_ANNOTATE_CHANGE'] + ' ...', 
          menu : [{ 
           label : translations['PDF_ANNOTATE_MODE'] + ' ...', 
           action : 'draw.modes' 
          }, { 
           label : translations['PDF_ANNOTATE_COLOR'] + ' ...', 
           action : 'draw.colors' 
          }, { 
           label : translations['PDF_ANNOTATE_SIZE'] + ' ...', 
           action : 'draw.widths' 
          }, { 
           label : translations['PDF_ANNOTATE_OPACITY'] + ' ...', 
           action : 'draw.opacities' 
          }, 'UNDO', 'REDO'] 
         }, {... etc}

我在正確的軌道上，在所有這樣的思路嗎？我似乎無法找到任何曾經這樣做過的人，這很令人困惑。任何幫助將不勝感激......

來源

2016-04-28 Logan Richardson

我看到很多人提到vfs_fonts.js文件，但它是供應商目錄中的供應商文件，並且作爲一般規則，我們不會惹惱供應商文件。該pdfMake文檔中提到創建自己和一堆其他的步驟，但我想，一定有比調整供應商的文件或需要創建一個全新的文件只是做這一塊（貌似）簡單的事情，更好的辦法.. –

你需要創建一個自定義vfs_fonts.js文件，其中包含以base64您的字體。鮑爾泰克的pdfMake創作者寫了一個整潔step-by-step tutorial如何創建文件。

一旦你創建自定義的字體文件，你需要手動包括pdfMake.js到HTML文檔中，並添加自定義vfs_fonts.js文件後面。然後添加對window.pdfMake.fonts的引用，否則使用它的默認字體定義「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 = { 
     "Open Sans": { 
      "normal": 'OpenSans-Regular.ttf', 
      "bold": 'OpenSans-Bold.ttf', 
      "italics": 'OpenSans-Italic.ttf', 
      "bolditalics": 'OpenSans-BoldItalic.ttf' 
     } 
    } 
</script>

您的自定義字體就可以使用了，唯一缺少的就是你的導出配置適應類似以下內容：

AmCharts.makeChart({ 
    "export": { 
     "enabled": true, 
     "pdfMake": { 
      defaultStyle: { 
       font: "Open Sans" 
      } 
     }, 
    }, 
    ... 
});

在萬一你一些麻煩產生vfs_fonts.js文件我已經創建了一個用於你 - download vfs_fonts.js（使用：https://www.google.com/fonts/specimen/Open+Sans）

來源

2016-04-30 14:50:10 Maertz

我不能「豎起大拇指」，因爲我還沒有足夠的代表，但這是一個很好的答案。 –

在PDF文件中更改字體由AmCharts

回答

相關問題