在Amcharts v4 pdf导出中包括图像

时间:2019-03-29 14:06:07

标签: image pdf amcharts amcharts4

我想在Amcharts pdf导出中添加徽标和其他图像。 版本:Ubuntu 16.04,Amcharts 4上的Php 7。

我已经关注https://www.amcharts.com/docs/v4/tutorials/generating-multi-content-pdf-export/

我有标题,文本图表和表格。该示例不包含图像,但我在此处查看了PDFmake: https://pdfmake.github.io/docs/document-definition-object/images/

在amCharts表中,诸如此类的块可以使用:

doc.content.push({
  table: {

在PDFMake中,语法为:

var docDefinition = {
content: [
    {
      layout: 'lightHorizontalLines', // optional
      table: {

和图像:

var dd = {
    content: [
        'pdfmake (since it\'s based on pdfkit) supports JPEG and PNG format',
        'If no width/height/fit is provided, image original size will be used',
        {
            image: 'sampleImage.jpg',
        },

所以我尝试了:

doc.content.push({
      image: 'sampleImage.jpg',
    }); 

然后将名为sampleImage.jpg的图像放在与php文件相同的文件夹中的服务器上

我希望将图像添加到我的report.pdf下载中,但是它不起作用。任何想法表示赞赏。具体来说,正确的语法是什么,应该在哪里包含图像?我想避免将图像转换为data:image / jpeg格式的麻烦。

1 个答案:

答案 0 :(得分:1)

回答我自己的问题:

因此,看起来您必须使用格式“ data:image / jpeg; base64”将图像包括在脚本中。我将图像转换为“ https://www.base64-image.de/”。结果是像这样的代码块:

data:image/jpeg;base64,/9j/4A... lots of data ... QhCABCEIA//2Q==

您可以将其复制到js变量中,如下所示:

smiley = 'data:image/jpeg;base64,/9j/4A... lots of data ... QhCABCEIA//2Q==';

然后将其输出:

    doc.content.push({
      image: smiley,
      width: 30
    });

我将图像放入表中

doc.content.push({
  table: {
    headerRows: 1,
    widths: [ "*", "*", "*", "*","*", "*", "*","*", "*", "*" ],
    body: [
      [
        {image: low, width: 30,  colSpan: 3, alignment: 'center'},{ },{ },
        {image: ok, width: 30,  colSpan: 4, alignment: 'center'},{ },{ },{ },
        {image: high, width: 30,  colSpan: 3, alignment: 'center'},{ },{ }

      ],
      [ 
        {text: "<?php echo $final_score_show[1]; ?>",  alignment: 'center'}, 
        ...
      ]
    ]
  }
});

希望这对某人有帮助。请享用 !